[CSS] Flexbox 컨테이너 속성

Float와 Position으로 고통받던 프론트엔드 개발자들에게 한 줄기 빛처럼 강림한 기술, 바로 Flexbox(Flexible Box Layout)입니다. Flexbox는 그 이름처럼 상자들의 크기를 뷰포트나 내용물에 맞게 아주 '유연하게' 늘이거나 줄이며 배치할 수 있도록 설계된 현대적인 1차원(가로 혹은 세로) 레이아웃 모델입니다. display: flex; 단 한 줄을 선언하는 순간, 부모 요소는 전지전능한 지휘자(Container)가 되어 자식 요소들(Items)의 방향, 정렬, 간격을 마음대로 주무를 수 있게 됩니다. 가운데 정렬을 하기 위해 margin: auto를 주며 씨름하던 과거는 잊으십시오. 이번 포스팅에서는 Flexbox의 양대 산맥 중 부모 요소에 적용하는 '컨테이너(Container)' 전용 속성들을 상세히 알아보겠습니다.

1. 선언과 동시에 시작되는 마법: display: flex

정렬하고 싶은 요소들을 감싸는 부모 태그에 display: flex;를 선언하는 순간, 그 부모는 Flex Container가 되고 직계 자식들은 자동으로 Flex Item으로 변신합니다.

.container {
    display: flex; /* 마법의 시작 */
}

이 한 줄만으로도 자식 요소들은 마치 inline-block을 준 것처럼 가로로 사이좋게 일렬로 늘어서게 됩니다. 블록 요소의 붕괴를 막기 위해 Clearfix를 쓰던 Float의 고통이 순식간에 사라지는 순간입니다.

2. 뼈대를 세우는 방향 설정: flex-direction

아이템들을 어느 방향으로 나열할지 결정합니다. 이것이 Flexbox의 **'주축(Main Axis)'**을 결정하는 가장 중요한 속성입니다.

• row (기본값): 왼쪽에서 오른쪽으로 (가로 배치)
• row-reverse: 오른쪽에서 왼쪽으로 역순 배치 (우측 정렬 시 유용)
• column: 위에서 아래로 (세로 배치 - 모바일 레이아웃의 핵심)
• column-reverse: 아래에서 위로 역순 배치

3. 주축(Main Axis) 정렬의 마술사: justify-content

flex-direction으로 결정된 주축 방향을 따라 아이템들 사이의 '여백'을 어떻게 배분할지 결정합니다.

• flex-start (기본값): 시작점으로 옹기종기 모음
• center: 가운데로 예쁘게 모음
• space-between: [실무 1순위] 첫 아이템은 끝에, 마지막 아이템도 끝에 딱 붙이고, 나머지 여백은 중간에 균등하게 배분. (네비게이션 바 양끝 정렬에 필수!)
• space-around: 아이템들의 둘레에 동일한 여백을 둘러줌.

4. 교차축(Cross Axis) 정렬: align-items

주축의 수직 방향(교차축)으로 아이템들을 어떻게 정렬할지 결정합니다. 보통 요소들의 수직 중앙 정렬을 맞출 때 사용합니다.

• stretch (기본값): 아이템들이 십자가 방향으로 쭉 늘어나서 컨테이너의 높이를 꽉 채웁니다.
• center: [실무 1순위] 아이템들을 수직 중앙에 예쁘게 배치합니다.
• flex-start / flex-end: 위쪽이나 아래쪽으로 모읍니다.

💡 영원한 난제 해결: 완벽한 정중앙 배치 공식

과거 margin과 position을 조합해 픽셀을 쪼개가며 맞추던 정중앙 배치가 Flexbox로는 단 3줄이면 끝납니다. 프론트엔드 개발자라면 자다가도 외워야 하는 필수 공식입니다.

.perfect-center {
    display: flex;
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center;     /* 세로 중앙 정렬 */
    height: 100vh;           /* 화면 꽉 찬 높이 기준 */
}

5. 줄바꿈의 지배자: flex-wrap

Flexbox의 기본 성질은 아이템들이 아무리 많아도 절대 줄바꿈을 하지 않고 자신의 크기를 찌그러뜨리면서라도 한 줄에 우겨넣으려 한다는 것입니다(nowrap). 아이템의 크기를 유지하면서 넘치면 다음 줄로 떨어지게 하려면 wrap 속성을 반드시 줘야 합니다.

.gallery-container {
    display: flex;
    flex-wrap: wrap; /* 자리가 모자라면 아래로 예쁘게 떨어져라! */
    gap: 20px;       /* 아이템들 사이의 여백 (최신 속성) */
}

정리하며

부모 요소(Container)에 display: flex를 선언하고, flex-direction으로 뼈대를 잡은 뒤, justify-content와 align-items로 중앙 정렬을 맞추는 이 패턴은 현대 웹 개발의 레이아웃을 구성하는 가장 기초적이고 완벽한 설계도입니다. 지휘자가 무대를 세팅했다면, 이제 무대 위에서 연주하는 개별 악기(Item)들을 세밀하게 튜닝할 차례입니다.

다음 12단계 포스팅에서는 화면 크기에 맞춰 아이템들이 고무줄처럼 늘어나고 줄어드는 마법, "Flexbox 아이템 속성 (팽창, 축소, 유연한 크기)"에 대해 뼈 때리게 파헤쳐 보겠습니다!