frontend/CSS&Design

[CSS] flex item의 방향과 순서 결정

findTheValue 2021. 7. 1. 16:09

flex container에서 속성을 부여해 결정함.

 

flex-direction

: row, row-reverse, column, column-reverse

초깃값 row

 

flex-wrap

: nowrap, wrap, wrap-reverse

줄바꿀꺼냐? - nowrap 안바꾸고 box넘어가도 그냥 삐져나감.

wrap: 아래로 줄바꿈, wrap-reverse: 위로 줄바꿈.

 

flex-flow

: <flex-direction> <flex-wrap>

두개 동시선언. 특별한거 x

 

order

:  숫자(기본값 0)

이건 유일하게 container가 아닌 item에 부여. 

container의 flex-direction의 배치순서 기준 낮은 숫자를 먼저 배치하고 높은 숫자를 나중에 배치