item에 적용 가능한 속성
1.order
flex 또는 grid 컨테이너 안에서 현재 아이템의 순서를 결정 짓습니다. HTML을 이용하지 않고 CSS만으로도 item들의 정렬 순서를 변경할 수 있도록 돕습니다. 아이템의 정렬 순서는 오름차순으로 정렬되며, 같은 값이 있는 경우 소스 코드의 순서대로 정렬이 됩니다. 단, 접근성의 순서와는 상관 없이 화면에 보이는 순서에만 영향을 줍니다.
또한 개별 아이템에 order을 주고 싶은 경우 item의 container에 display: flex가 설정되어 있어야 합니다.
정수를 사용할 수 있습니다. 기본 값은 0으로 만약 이보다 더 앞으로 보내고 싶다면 음수도 사용할 수 있습니다.
.container {
...
display: flex;
}
.item:nth-child(3) {
order: -1;
}
순서대로 정렬되어 있는 아이템 중 세번째 요소에 order: -1값을 설정하는 경우 아래와 같이 화면상 3번이 제일 앞에서 배치된 것을 확인할 수 있습니다. 실제로 개발도구를 열어 확인해보면, 화면상의 배치순서만 달라진 것을 확인할 수 있습니다.
2. flex-grow & flex-shrink & flex-basis
flex-gorw와 flex-shrink 그리고 flex-basis는 세개의 속성을 하나의 단축속성을 통해 합쳐서 사용할 수도 있습니다.
동적으로 만드는 메뉴나 네비게이션 바를 만들 때 유용하게 쓸 수 있습니다.
3 flex-grow
아이템 요소들이 컨테이너 요소 내부에서 할당 가능한 공간보다 더 많거나 적은 자리를 차지할 수 있도록 설정할 수 있습니다
음수를 제외한 소수점을 포함한 숫자를 사용할 수 있습니다. 기본값은 0입니다.
item에 flex-gorw 1을 주게 되면 아이템이 수용가능한 공간이 남는 경우 아이템 요소들이 동일한 비율로 나누어서 공간을 차지하게 됩니다.
.item {
..
flex-grow: 1;
}
container에 flex-wrap: wrap값을 주고 item에 flex-grow: 1로 설정하는 경우 아래와 같이 공간을 차지하게 됩니다.
.container {
...
flex-wrap: wrap;
}
.item {
..
flex-grow: 1;
}
남은 공간을 grow가 설정된 아이템들이 grow에 설정된 값만큼의 비율로 나눠서 가지게 됩니다.
.item:nth-child(2) {
flex-grow: 2;
}
.item:nth-child(3) {
flex-grow: 1;
}
3. flex- shrink
flex-grow가 늘어나게 하는 속성이었다면, flex-shrink는 줄어들게 합니다. 컨테이너의 크기가 아이템들의 크기보다 작아지는 경우 적용되게 됩니다.
음수를 제외한 소수점을 포함한 숫자를 사용할 수 있습니다. 기본값은 1입니다.
아래 예시의 경우 뷰포트 크기를 줄여 container의 크기가 아이템의 가로값의 합보다 줄어드는 경우 flex-shrink가 적용된 2번 아이템이 줄어들게 됩니다.
.item {
width: 220px;
...
}
.item:nth-child(2) {
flex-shrink: 2;
}
아이템 1번의 요소에만 flex-shrink:0을 주게 되면, 다른 아이템들의 기본값이 1이기 때문에 1번 아이템을 제외한 2번과 3번의 아이템이 비율적으로 줄어들게 됩니다. 만약, 더이상 아이템의 크기를 줄일 수 없게 된다면 container의 바깥쪽으로 아이템이 넘치게 됩니다.
.item:nth-child(1) {
flex-shrink: 0;
}
4. flex- basis
flex-grow와 flex-shrink를 통해 아이템의 크기를 늘리거나 줄일 수 있었습니다. 하지만 늘리거나 줄이는 비율이 정확하게 딱 떨어지게 계산되지 않습니다. 그 이유는 flex-basis의 개념이 적용되기 때문입니다. flex-basis는 플렉스 아이템의 초기 크기를 지정을 하게 됩니다. flex-bais를 적용하지 않는 경우 요소 자체의 원래의 width값을 가지게 됩니다.
만약, item의 width값을 설정하지 않는 경우 자기가 차지하고 있는 컨텐츠 크기만큼 영역을 가지게 됩니다.
이러한 상황에서 flex-grow:1 값을 설정하게 되면 아이템들이 차지하고 있는 영역을 제외한 부분에서 1:1:1의 비율로 늘어나게 됩니다.
이럴 때 flex-basis를 이용해 HTML을 이용하지 않고도 CSS를 통해 파란색의 영역을 동일하게 맞춰주고 동일한 비율로 영역이 배치되게 할 수 있습니다. 이런 방법으로 조금 더 직관적으로 아이템의 비율을 설정할 수 있습니다. 아래 실습 예제에서 flex-bais를 이용한 파란색 영역 설정을 확인해보도록 하겠습니다.
단위값을 사용할 수도 있으며(px, em, rem), container크기에 따른 상대적인 값인 %을 사용할 수 있습니다. 기본 값은 auto입니다.
실습예제1
flex-basis에 일정 값을 파란색 영역의 비율을 지정할 수도 있지만( ex) flex-bais: 50px ) , flex-bais:0 으로 설정을 해 초기 아이템 영역의 아이템이 없도록 지정해줄 수 있습니다.
.item {
...
flex-grow: 1;
flex-basis: 0;
}
실습예제2
각각의 아이템에 flex-basis를 다르게 지정할 수도 있습니다.
.item:nth-child(1){
flex-grow: 5;
}
.item:nth-child(2){
flex-grow: 1;
}
.item:nth-child(3){
flex-grow: 3;
}5. flex
flex-grow, flex-shrink, flex-basis를 한 줄에 작성할 수 있는 속성입니다. 세가지 속성을 순서에 맞춰 작성을 해주어야합니다. 만약 작성을 하지 않는 경우 초기기본값이 설정되게 됩니다. 단, flex-basis는 지정하지 않는다고 해서 기본값 auto가 설정되지 않는 경우가 있기 때문에 주의를 해야합니다.
※한 개 또는 두 개의 단위 없는 숫자 값을 사용하는 경우, flex-basis의 값은 auto가 아니라 o이 됩니다.
( flex:1; 과 flex-grow:1; 은 같은 뜻이지만 flex: 1 의 경우 flex-basis의 초기값이 0으로 설정되게 됩니다.)1. 값이 한개인 경우
<number>을 지정하는 경우 flex-grow가 됩니다.<lenght>또는 %를 지정하면 flex-basis가 됩니다
none, auto, initial 중 하나를 지정할 수 있습니다.2. 값이 두 개인 경우
첫 번째 값은 반드시 number이어야 합니다. 즉, flex-grow가 사용되어야합니다. 두 번째 값으로 number을 지정하면 flex-shrink가 되며, length나 % 또는 auto를 지정하는 경우 flex-basis가 됩니다.
3. 값이 세 개인 경우
flex-grow, flex-shrink, flex-basis순으로 작성을 합니다.
속성 값으로 initial, auto, none과 같은 키워드도 사용할 수 있습니다.
-
nitial (= flex: 0 1 auto; ) : 기본 값으로 사용됩니다.
-
uto(= flex: 1 1 auto; ) :컨테이너 크기에 따라 아이템의 늘어나기도 하고 줄어들기도 하며 여백을 없앱니다.
-
one(= flex: 0 0 auto; ):늘어나지도 줄어나지도 않습니다.
