CSS 기초-(7) display:flex

display:flex

css에서 요소에 display:flex를 지정하면 자식요소들이 item화 된다.
때문에 dispaly:flex를 지정한 것과 똑같은 요소에 속성을 부여하면 item들이 정렬된다.

1.container 박스에 주는 속성

부모 요소에게 지정하는 속성 display:flex
→ 블럭에서 플렉스로 변경
default 값: row nowrap

flex-flow: row nowrap ;

flex-direction

→ 아이템의 배치방향을 지정
row | column | row-reverse | column-reverse

flex-wrap

→ 아이템의 배치를 1줄 또는 여러줄로 지정
wrap | nowrap | wrap-reverse

justify-content

→ 주축 방향 정렬
flex-start | flex-end | center | space-between | space-around

align-items

→ 한 줄에 있는 아이템의 교차축 방향 정렬
flex-start | flex-end | center | stretch

align-content

→ 여러 줄의 아이템의 교차축 정렬
flex-start | flex-end | center | space-between | space-around

2.item에게 주는 속성

default 값: 0

order

→ 아이템의 배치 순서를 지정
order: 작은숫자;로 지정하면 순서가 앞으로 지정된다.