flexbox

https://codesandbox.io/p/sandbox/cssflex-e7vc5?file=%2Fsrc%2Findex.js

https://codesandbox.io/s/cssflex-e7vc5?file=/index.html

flexbox container에 설정 가능한 프로퍼티

display

flex: flex 컨테이너 간 수직 정렬

flex-lnline: 컨테이너 간 수평 정렬 (잘안씀)

flex-direction

아이템정렬 방향. 수직 정렬할때도 씀

flex-wrap

flex 아이템을 한줄에or여러줄에 보여줄지 설정

기본값: nowrap

justify-content

주 축 기반 수평 정렬 방법 설정 (배치된 요소들을 어떻게 정렬할 거냐)

왼쪽 정렬 오른쪽 정렬 중앙 정렬 같은거!

align-items align-content

교차 축 기반 정렬 방법 설정

align-items: 여러 줄이 있을 때 각 줄에 적용

align-content: 여러 줄을 한꺼번에 교차축을 중심으로 어떻게 배열할지를 설정

align-items: stretch 디폴트. 교차축을 채우기 위해 flex item height 미설정시 자동으로 늘어남