Flex box

이전에는 float이나 table로 공간을 나누어 배치 했지만 현재는 flex를 사용한다.

flex box의 기본구성에는 container와 item이 있다
단수 혹은 복수의 item을 container 박스로 둘러 쌓고 있는 개념이다.

---

flex box에는 중심축(main axis)과 반대축(cross axis)이있다.
중심축을 기준으로 item이 쌓이게 된다.

---

container의 속성에는

속성	의미	기본값
display	flex container를 정의
flex-direction	flex items의 주 축을 설정	row
flex-wrap	flex items의 여러 줄 묶음(줄 바꿈) 설정	nowrap
flex-flow	flex-direction과 flex-wrap의 단축 속성
justify-content	주 축의 정렬 방법을 설정	flex-start
align-items	교차 축에서 items의 정렬 방법을 설정(2줄 이상)	stretch
align-content	교차 축의 정렬 방법을 설정	stretch

---

item의 속성에는

속성	의미	기본값
order	item의 순서를 지정	0
flex-grow	item의 증가 너비 비율을 지정	0
flex-shrink	item의 감소 너비 비율을 지정
* flex-grow	item의 기본 너비 지정	auto;
* align-self	교차 축에서 개별 item의 정렬 방법을 설정	auto