이번엔 flex container가 아닌 flex item들의 속성에 대해 정리해보겠다.
order
flex item의 배치 순서를 지정하는 속성이다.
html 코드의 배치를 변경하지 않고 order 속성값을 지정하는 것으로 엘리먼트들을 재배치 할수 있다.
order 숫자 값이 낮을수록 배치 순위가 높다. order의 숫자는 음수값도 가능하다
<div class="father">
<div class="box" style="order: 2;">1</div>
<div class="box" style="order: 0;">2</div>
<div class="box" style="order: 0;">3</div>
<div class="box" style="order: 4;">4</div>
<div class="box" style="order: 3;">5</div>
</div>
위 처럼 flex item들에게 order 값을 주었는데, 2번과 3번이 order값이 같지만 2번의 배치순서가 더 위에 있기 때문에 2번이 더 앞에 오게된다.
그 이후로는 순서대로 1 -> 5 -> 4번순으로 배치가 된다.
flex-grow
flex item의 너비 확대를 지정하는 속성이다.
flex-grow의 기본값은 0으로 설정되어있고 음수값은 불가능하다.
<div class="father">
<div class="box" style="order: 2;">1</div>
<div class="box" style="order: 0;">2</div>
<div class="box" style="order: 0; flex-grow: 2;">3</div>
<div class="box" style="order: 4;">4</div>
<div class="box" style="order: 3;">5</div>
</div>
3번에게 flex-grow값을 타 엘리먼트보다 더 높게 지정해주었는데 이렇게되면 3번은 flex container가 가지고 있는 폭에서 자신이 가질수 있는 최대 폭으로 확대된다.
flex-shrink
flex item의 너비 축소를 지정하는 속성이다.
앞선 글에서 본 것처럼 flex가 nowrap 상태일 때 flex container안에 위치한 엘리먼트들은 행을 추가하지않고 크기가 줄어드는 걸 볼수 있는데, flex-shrink의 값을 0으로 설정하면 축소가 해제되어 원래 너비를 유지한다.
<div class="father">
<div class="box" style="order: 2;">1</div>
<div class="box" style="order: 0;">2</div>
<div class="box" style="order: 0; flex-shrink: 0;">3</div>
<div class="box" style="order: 4;">4</div>
<div class="box" style="order: 3;">5</div>
<div class="box" style="order: 3;">6</div>
<div class="box" style="order: 3;">7</div>
<div class="box" style="order: 3;">8</div>
<div class="box" style="order: 3;">9</div>
</div>
3번의 엘리먼트에만 flex-shrink를 0으로 설정해주었더니 혼자만 제외하고 나머지 엘리먼트들은 폭이 축소가 되었다.
flex-basis
flex item의 너비 기본값을 px, %등의 단위로 지정하고 기본값은 auto로 설정되어있다.
flex
flex-grow, flex-shrink, flex-basis 속성을 한번에 설정할수 있는 속성이다.
기본값은 0, 1, auto 로 되어있다.
flex: 0 1 auto
align-self
앞서 보았던 align-items 보다 우선 순위가 높고 개별적으로 수직 방향으로 정렬을 하는 속성이다. 반대로 justify-self 속성도 존재한다.
<div class="father">
<div class="box" style="">1</div>
<div class="box" style="align-self: flex-end;">2</div>
<div class="box" style="">3</div>
<div class="box" style="align-self: flex-start;">4</div>
<div class="box" style="align-self: center;">5</div>
<div class="box" style="">6</div>
<div class="box" style="align-self: baseline;">7</div>
</div>
