📝 flex-container 전용 속성

---

💡 flex-direction

main axis(중심축) 방향, 시작/끝 지정

- row (기본값)

- row-reverse

- column

- column-reverse

💡 flex-wrap

item이 한 줄/여러 줄로 배치되게 지정

- nowrap (기본값)

한 줄로 배치, item의 크기가 변경(훼손)될 수 있음

- wrap

여러 줄로 배치

- wrap-reverse

여러 줄로 배치(cross axis 방향 반대)

💡 flex-flow

flex-direction + flex-wrap;

💡 justify-content

main axis(중심축)을 기준으로 item 정렬

💡 align-content

cross axis(교차축)을 기준으로 포장된(wrap) item 정렬
-> 조건 : flex-wrap이 wrap 또는 wrap-reverse 이여야 함

- flex-start

축 시작 지점 기준으로 정렬

- flex-end

축 끝 지점 기준으로 정렬

- center

축 가운데 정렬

- space-around

item에 축 방향 양쪽으로 일정 크기 공간을 배치

- spcae-evenly

item에 축 방향 양쪽으로 모두 동일한 크기의 공간을 배치

- space-between

space-evenly에서 시작, 끝 item은 flex-container에 붙게 배치

💡 align-items

cross axis(교차축)을 기준으로 item을 배치

- stretch (기본값)

item을 cross axis 방향으로 flex-container만큼 늘림
단, cross axis 방향으로 지정된 크기 속성(width/height)가 없어야 함

- flex-start

교차축 시작 지점에 배치

- flex-end

교차축 끝 지점에 배치

- center

교차축 가운데 지점에 배치

- baseline

item에 작성된 내용이 한 직선에 배치될 수 있도록 item을 교차축 방향으로 알맞게 배치