1. 왜 Flex를 쓰는가?
간단히 정리하면 레이아웃을 쉽게 구성할 수 있는 방법 중 하나입니다.
우리가 자주 사용하는 div는 display 기본값이 block이기 때문에 수평으로 정렬할 수 없습니다.
수평으로 정렬할 요소들의 부모 요소에 display속성에 flex를 적용하게 되면 손쉽게 수평으로 정렬할 수 있게 됩니다.
또한 span같은 inline요소들도 수직으로 정렬하고 제어하는 것이 마찬가지로 가능해집니다.
2. Flex 개념
Flex의 개념은 두가지, container와 item으로 나뉩니다.
정렬할 item들을 감쌀 부모 요소인 container가 필수입니다.
container와 item에서 사용할 수 있는 속성도 완전히 구분되어져 있습니다.
3. container의 속성
display : Flex container를 정의
flex-direction : items의 주 축 설정(기본값 : row)
flex-wrap : 줄 바꿈 설정(기본값 : nowrap)
flex-flow : flex-direction, flex-wrap의 단축 속성
justify-content : 주 축 정렬 방법 설정(기본값 : flex-start
align-content : 교차 축 정렬 방법 설정(기본값 : stretch)
align-items : 교차 축 items 정렬 방법(기본값 : stretch)
4. item의 속성
order : item 순서 설정(기본값 : 0)
flex-grow : item 증가 너비 비율 설정(기본값 : 0)
flex-shrink : item 감소 너비 비율 설정(기본값 : 1)
flex-basis : 공간 배분 전 item 기본 너비 설정(기본값 : auto)
flex : flex-grow, flex-shrink, flex-basis의 단축 속성
align-self : 교차 축에서 개별 item 정렬 방법 설정(기본값 : auto)
