한 축 배치와 두 축 배치는 어떻게 구분하는가?

행이나 열 한 축의 흐름이 핵심이면 Flexbox를 쓴다. 행과 열을 함께 맞추거나 영역 전체를 설계하면 Grid를 쓴다.

Flexbox는 콘텐츠 크기와 남은 공간을 따라 항목을 배치한다. 줄바꿈해도 각 줄은 독립적으로 정렬되므로 열 맞춤에는 약하다.

Grid는 행과 열 트랙을 먼저 정의해 항목을 배치한다. 두 방식을 함께 써도 된다. 페이지는 Grid, 내부 도구 모음은 Flexbox가 자연스럽다.