CSS - 9

- Flexbox

정의 (Definition)

플렉스박스(Flexbox)는 'Flexible Box'의 줄임말로, 행(Row) 또는 열(Column)을 주축으로 하여 요소를 배치하는 1차원 레이아웃 모델입니다.

복잡한 계산 없이도 요소의 크기를 유동적으로 조절하고, 정렬하며, 빈 공간을 배분할 수 있도록 설계된 인터페이스입니다.

 

특징 및 장점 (Key Features & Advantages)

• 방향의 자유로움: 가로(행) 또는 세로(열) 중 원하는 방향으로 요소를 쉽게 나열할 수 있습니다.
• 유동적인 크기: 컨테이너의 크기에 맞춰 자식 요소들의 너비나 높이를 자동으로 늘리거나 줄일 수 있습니다.
• 간편한 정렬: 과거 float이나 inline-block으로 구현하기 힘들었던 '수직 중앙 정렬'이나 '균등 분할'을 단 한 줄의 코드로 해결합니다.
• 순서 변경: HTML 구조를 바꾸지 않고도 CSS 속성만으로 화면에 보이는 요소의 순서를 뒤바꿀 수 있습니다.

 

용어 설명 (Terminology)

플렉스박스를 제대로 다루기 위해서는 두 가지 핵심 영역과 축(Axis)의 개념을 이해해야 합니다.

1) 주체(Entities)

• Flex Container (부모): display: flex;가 적용된 요소입니다. 자식 요소들을 배치하는 '틀' 역할을 합니다.
• Flex Item (자식): 컨테이너 안에 담긴 개별 요소들입니다. 부모가 정한 규칙에 따라 움직입니다.

2) 축(Axes)

• 주축 (Main Axis): 아이템이 배치되는 기본 방향입니다. flex-direction 설정에 따라 가로가 될 수도, 세로가 될 수도 있습니다.
• 교차 축 (Cross Axis): 주축과 수직을 이루는 축입니다. 주축이 가로라면 교차 축은 세로가 됩니다.

3) 시작점과 끝점 (Start & End)

• Main Start / Main End: 주축이 시작되고 끝나는 지점입니다.
• Cross Start / Cross End: 교차 축이 시작되고 끝나는 지점입니다.

 

플렉스박스 기본 구조 요약표

용어	설명	비고
Flex Container	부모 요소	display: flex 선언 필요
Flex Item	자식 요소	부모 내부에서 정렬되는 대상
Main Axis	주축	아이템 배치의 기준선
Cross Axis	교차 축	주축과 직각을 이루는 축

 

학습 정리

• 플렉스박스는 1차원 레이아웃이므로, 한 번에 가로와 세로를 동시에 대규모로 배치할 때는 그리드(Grid)가 더 유리할 수 있습니다.
• 모든 정렬의 기준은 주축(Main Axis)이 어디냐에 따라 결정되므로 방향 설정을 가장 먼저 확인해야 합니다.

 

- Flex Container property

정렬의 시작: display: flex;

모든 플렉스 레이아웃은 부모 요소에 이 속성을 선언하는 것부터 시작합니다.

• display: flex;: 컨테이너를 블록 레벨의 플렉스 컨테이너로 만듭니다.
• display: inline-flex;: 컨테이너를 인라인 레벨의 플렉스 컨테이너로 만듭니다.

 

축과 방향: flex-direction

아이템들이 배치될 주축(Main Axis)의 방향을 결정합니다.

• row: 가로 방향으로 배치합니다 (왼쪽 → 오른쪽). 기본값입니다.
• row-reverse: 가로 방향 역순으로 배치합니다 (오른쪽 → 왼쪽).
• column: 세로 방향으로 배치합니다 (위 → 아래).
• column-reverse: 세로 방향 역순으로 배치합니다 (아래 → 위).

 

줄 바꿈 설정: flex-wrap

컨테이너의 너비가 부족할 때 아이템들을 한 줄에 억지로 넣을지, 다음 줄로 넘길지 결정합니다.

• nowrap: 줄 바꿈을 하지 않습니다. 아이템이 넘치거나 찌그러질 수 있습니다. 기본값입니다.
• wrap: 너비가 부족하면 다음 줄로 자연스럽게 넘깁니다.
• wrap-reverse: 아래에서 위 방향으로 줄 바꿈을 합니다.

 

메인 축 정렬: justify-content

아이템들을 **가로 방향(주축)**으로 어떻게 정렬할지 결정합니다.

• flex-start: 시작 지점으로 정렬합니다.
• flex-end: 끝 지점으로 정렬합니다.
• center: 가운데로 정렬합니다.
• space-between: 첫 번째와 마지막 아이템을 양 끝에 붙이고 사이 간격을 동일하게 둡니다.
• space-around: 모든 아이템의 주변 간격을 동일하게 둡니다.

 

교차 축 정렬: align-items

아이템들을 **세로 방향(교차 축)**으로 어떻게 정렬할지 결정합니다 (한 줄 기준).

• stretch: 컨테이너의 높이만큼 꽉 채우기 위해 늘어납니다. 기본값입니다.
• flex-start: 상단에 정렬합니다.
• flex-end: 하단에 정렬합니다.
• center: 세로 중앙에 정렬합니다.
• baseline: 텍스트의 기준선(Baseline)에 맞춰 정렬합니다.

 

실전 예제 코드: "중앙 정렬 레이아웃"

플렉스박스를 사용하는 가장 흔한 이유 중 하나인 '완벽한 정중앙 정렬' 코드입니다.

HTML

 

<style>
  .parent {
    display: flex;
    flex-direction: row;      /* 가로 방향으로 */
    justify-content: center;  /* 가로 중앙 정렬 */
    align-items: center;      /* 세로 중앙 정렬 */
    
    height: 200px;
    background-color: #f0f0f0;
  }

  .child {
    width: 50px;
    height: 50px;
    background-color: #3498db;
  }
</style>

<div class="parent">
  <div class="child"></div>
</div>

 

플렉스 컨테이너 주요 속성 요약표

속성	역할	주요 값
flex-direction	아이템 배치 방향	row, column
flex-wrap	줄 바꿈 여부	nowrap, wrap
justify-content	주축(가로) 정렬	center, space-between
align-items	교차 축(세로) 정렬	center, stretch
align-content	여러 줄일 때의 수직 정렬	center, space-around

 

학습 정리

• 플렉스박스는 부모인 컨테이너에 속성을 주어 자식들을 통제하는 방식입니다.
• justify-content는 가로(주축), align-items는 세로(교차 축)를 담당한다고 기억하면 쉽습니다.
• 만약 flex-direction: column;이 되면 주축이 세로가 되어 두 속성의 역할이 뒤바뀝니다.

 

코드 예제

지금까지 살펴본 플렉스 컨테이너(Flex Container)의 핵심 속성들을 각각의 코드 예제와 함께 정리해 드리겠습니다.

각 속성이 화면에서 어떻게 작동하는지 바로 확인하실 수 있도록 구성했습니다.

 

flex-direction (배치 방향)

아이템이 나열되는 메인 축의 방향을 결정합니다.

CSS

.container-direction {
  display: flex;
  /* row(기본), row-reverse, column, column-reverse */
  flex-direction: column; 
}

 

 

flex-wrap (줄 바꿈)

아이템들이 부모 너비를 넘었을 때 줄을 바꿀지 결정합니다.

CSS

.container-wrap {
  display: flex;
  /* nowrap(기본), wrap, wrap-reverse */
  flex-wrap: wrap; 
}

.item {
  flex-basis: 40%; /* 아이템 하나의 너비가 부모의 40%이므로 3개부터는 줄 바꿈 발생 */
}

 

 

justify-content (메인 축 정렬)

아이템들을 가로(주축) 방향으로 어떻게 정렬하고 공간을 나눌지 정합니다.

CSS

 

.container-justify {
  display: flex;
  /* flex-start(기본), flex-end, center, space-between, space-around, space-evenly */
  justify-content: space-between; 
}

 

align-items (교차 축 정렬)

아이템들을 세로(교차 축) 방향으로 어떻게 정렬할지 정합니다. (한 줄 기준)

CSS

 

.container-align {
  display: flex;
  height: 200px;
  /* stretch(기본), flex-start, flex-end, center, baseline */
  align-items: center; 
}

 

align-content (여러 줄 정렬)

flex-wrap: wrap; 상태에서 아이템들이 두 줄 이상일 때, 그 줄들 사이의 수직 간격을 정렬합니다.

CSS

.container-content {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  /* flex-start, flex-end, center, space-between, space-around, stretch(기본) */
  align-content: space-around; 
}

 

 

flex-flow (축약형)

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 편리한 속성입니다.

CSS

 

.container-flow {
  display: flex;
  /* direction wrap 순서로 작성 */
  flex-flow: row wrap; 
}

 

속성별 역할 요약표

속성	제어 대상	주요 특징
flex-direction	방향	가로로 쌓을지, 세로로 쌓을지 결정
flex-wrap	줄 바꿈	넘치는 아이템을 다음 줄로 넘길지 결정
justify-content	주축 정렬	가로 방향의 여백과 위치를 조절
align-items	교차 축 정렬	세로 방향의 정렬(한 줄 안에서)을 조절
align-content	여러 줄 정렬	세로 방향의 정렬(여러 줄 사이에서)을 조절

 

학습 정리

• justify-content는 "가로", align-items는 "세로"라고 외우는 것이 가장 편하지만, flex-direction: column;이 되면 두 역할이 반대가 된다는 점만 주의하세요.
• 실제 개발 시에는 justify-content: center;와 align-items: center;의 조합이 가장 빈번하게 사용됩니다.

 

- Flexbox game

 

Flexbox game

Flexbox game

flexbox를 게임으로 즐길 수 있는 방법