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의 배치순서 기준 낮은 숫자를 먼저 배치하고 높은 숫자를 나중에 배치 

'frontend > CSS&Design' 카테고리의 다른 글

[CSS] div, span 간단 구분.  (0) 2021.07.01
[CSS] 간단한 수직 가운데정렬  (0) 2021.07.01
[CSS] 선택자 속성, 자손, 동위  (0) 2021.07.01
[CSS] 테두리 둥글게 border-radius  (0) 2021.07.01
[CSS] flex속성 정리  (0) 2021.07.01