플렉스 레이아웃의 기본 구조: 부모와 자식의 관계
플렉스 박스(Flexbox)에서 플렉스 컨테이너(flex container)는 항상 부모 요소이고, 플렉스 아이템(flex item)은 항상 직계 자식 요소입니다. 그 이유는 플렉스 포맷팅 컨텍스트(flex formatting context)의 적용 범위가 오직 부모-자식 관계로 한정되기 때문입니다.
따라서 플렉스 컨테이너의 자식보다 더 깊은 위치에 있는 후손(descendant) 요소들은 플렉스 레이아웃의 대상에서 제외되며, 아무리 플렉스 속성을 부여해도 아무런 효과가 없습니다.
플렉스 컨테이너를 만드는 방법
어떤 요소를 플렉스 컨테이너로 지정하려면 반드시 다음 속성 중 하나를 선언해야 합니다.
display: flex;
인라인 레벨의 플렉스 컨테이너가 필요한 경우에는 다음을 사용합니다.
display: inline-flex;
플렉스 속성의 적용 대상 구분하기
플렉스 속성이라고 해서 모든 요소에 동일하게 적용되는 것은 아닙니다. 어떤 속성은 플렉스 컨테이너에만 유효하고, 어떤 속성은 플렉스 아이템에만 유효합니다. 두 그룹을 정확히 구분하는 것이 중첩 레이아웃을 다룰 때 혼란을 피하는 핵심입니다.
플렉스 컨테이너에만 적용되는 속성
justify-content flex-wrap flex-direction
이 속성들은 자식 아이템들을 가로·세로 축으로 정렬하거나, 줄바꿈 여부를 결정하고, 주축(main axis)의 방향을 지정하는 역할을 합니다.
플렉스 아이템에만 적용되는 속성
align-self flex-grow flex
이 속성들은 개별 아이템이 남은 공간을 얼마나 차지할지(flex-grow), 교차축 정렬을 따로 지정할지(align-self), 크기를 유연하게 조절할지(flex)를 결정합니다.
중첩된 플렉스 컨테이너 활용 팁
플렉스 아이템 내부에 또 하나의 플렉스 레이아웃이 필요하다면, 해당 자식 요소에 다시 display: flex를 선언하여 새로운 플렉스 컨테이너로 만들어야 합니다. 이렇게 하면 각 계층마다 독립적인 플렉스 포맷팅 컨텍스트가 생성되어, 상위 컨테이너의 설정과 충돌 없이 자체적인 정렬 규칙을 적용할 수 있습니다.