9장. Flexbox를 선택하는 기준

Flexbox는 한 축의 남는 공간 분배와 정렬에 적합하다. flex-basis, grow, shrink가 최종 크기를 어떻게 나누는지 숫자로 계산해 본다. flex:1이 모든 item을 언제 같은 폭으로 만들고, 콘텐츠 크기 때문에 언제 달라지는지 실험한다.

header action, button group, avatar stack처럼 행 또는 열 한 축이 핵심이면 Flex를 쓴다. 전체 page의 행과 열을 동시에 맞추려 Flex를 중첩하기보다 Grid를 고려한다.

gap은 항목 사이, margin은 항목 외부 관계다. justify-content는 main axis, align-items는 cross axis다. 축 방향을 바꾸면 의미도 바뀐다.