[CSS] Flexbox 간단 정리

※ MDN 공식문서를 참고했습니다

flex container와 flex-items

 

flex items가 flex container을 초과한 모습

flex-wrap: wrap을 사용해 아이템 정렬

 

flex-flow: row wrap

 

Flexible sizing of flex items

flex:1, flex:2 이런 식으로 해서 사이즈에 관한 비율을 정할 수 있습니다. 아래 그림은 앞의 두 아이템엔 flex:1을 적용하고 세 번째 아이템엔 flex:2를 적용한 것입니다. 1+1+2=4이므로 세 번째의 크기가 앞의 두 아이템을 합친 크기와 같습니다.

여기에서 앞의 두 아이템에 flex:1 200px, 세 번째 아이템에 flex:2 200px을 입력해보겠습니다.

이것의 뜻은 다음과 같은데요.

flex-grow와 flex-shrink는 단위가 없습니다. 단위 없는 숫자를 하나만 넣으면 flex-grow에 들어가고 그 상태에서 단위 있는 값을 넣으면 자동으로 flex-basis에 할당됩니다. flex-basis는 최소 크기를 말합니다. 이 예제에선 200px보다 사이즈가 작아질 수 없다는 것을 의미합니다. 동작 방식은 먼저 200px가 주어지고 나서 남은 공간이 비율 단위에 따라 공유됩니다.

flex에서 두 번째 단위 없는 비율 값인 flex-shrink는 아이템이 컨테이너를 초과할 때 동작합니다. 이 값은 아이템이 오버플로우를 막기 위해 얼마나 움츠러들지를 지정합니다. 공식 문서에서는, 사전에 오버라이드하는 하지 않는 이상 flex-grow, flex-shirnk, flex-basis는 따로 쓰지 말고 flex에서 축약된 형태로 쓰는 것을 권합니다.

 

Order

디폴트 값은 0입니다. 값이 클수록 먼저 등장하고 클수록 뒤에서 나타납니다. 0인 값보다 먼저 등장시켜야 할 때는 음수를 사용할 수 있습니다.

위 아이템 중에서 Smile 아이템의 order을 1로 주면 맨 뒤로 이동합니다.