Engineering

CSS Flex(Flexible Box) 완벽 가이드

CSS Flex(Flexible Box) 완벽 가이드 학습 내용을 정리한 백필 노트입니다.

이 글은 2025년 학습 기록을 블로그 형식으로 정리한 백필 노트입니다.

1. Flexbox란 무엇인가?

과거 웹사이트 레이아웃에서 수평 구성을 만들기 위해 float이나 inline-block과 같은 속성을 사용했지만, 이는 여러 부수적인 문제(Clear, White space 등)를 동반하는 차선책이었습니다.

CSS3 Flexbox는 요소의 크기가 불분명하거나 동적일 때도, 각 요소를 효율적으로 정렬할 수 있는 명확한 방법을 제공합니다. 복잡한 CSS 핵(hack) 없이, 부모 요소에 display: flex; 한 줄만으로 자식 요소들의 수평 정렬을 간단하게 구현할 수 있습니다.

**float 방식 예시 (복잡함):**HTMLCSS

<div class="clearfix">
  <div class="box"></div>
  <div class="box"></div>
</div>

.clearfix::after { content: ""; clear: both; display: block; }
.box { float: left; }

**Flexbox 방식 예시 (간단함):**HTMLCSS

<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
</div>

.box-container { display: flex; }

2. Flexbox의 기본 개념

Flexbox는 **Container(부모 요소)**와 **Items(자식 요소)**라는 두 가지 개념으로 구성됩니다. 각 아이템을 정렬하기 위해서는 반드시 부모 요소인 Container가 필요하며, Container와 Items에 적용하는 속성은 서로 구분됩니다.

가. 주 축(main-axis)과 교차 축(cross-axis)

flex-direction 속성 값에 따라 축의 방향이 결정됩니다.
row (기본값): 주 축은 수평, 교차 축은 수직이 됩니다.
column: 주 축은 수직, 교차 축은 수평이 됩니다.

나. 시작점(flex-start)과 끝점(flex-end)

주 축과 교차 축에는 각각 시작하는 지점과 끝나는 지점이 있습니다.
이 또한 축의 방향에 따라 위치가 달라지며, 정렬 속성에서 값으로 사용됩니다.

3. Flex Container 속성 (부모 요소에 적용)

| 속성 | 의미 | | --- | --- | | display | Flex Container를 정의합니다. | | flex-flow | flex-direction과 flex-wrap의 단축 속성입니다. | | flex-direction | Flex Items의 주 축(Main Axis) 방향을 설정합니다. | | flex-wrap | Flex Items의 줄 바꿈을 설정합니다. | | justify-content | **주 축(Main Axis)**의 정렬 방법을 설정합니다. | | align-content | **교차 축(Cross Axis)**의 정렬 방법을 설정합니다. (2줄 이상일 때) | | align-items | **교차 축(Cross Axis)**에서 Items의 정렬 방법을 설정합니다. (1줄일 때) | | gap | 각 아이템 사이의 간격을 설정합니다. |

`display`

flex: Block 특성의 Flex Container를 정의합니다.
inline-flex: Inline 특성의 Flex Container를 정의합니다. (Container 자체가 수평으로 쌓임)

`flex-direction`: 주 축 방향 설정

| 값 | 의미 | 기본값 | | --- | --- | --- | | row | Items를 수평축 (왼쪽 → 오른쪽)으로 표시 | row | | row-reverse | row의 반대 방향으로 표시 | | | column | Items를 수직축 (위 → 아래)으로 표시 | | | column-reverse | column의 반대 방향으로 표시 | |

`flex-wrap`: 줄 바꿈 설정

| 값 | 의미 | 기본값 | | --- | --- | --- | | nowrap | 모든 Items를 한 줄에 표시 (줄 바꿈 없음) | nowrap | | wrap | Items를 여러 줄로 묶음 (줄 바꿈) | | | wrap-reverse | wrap의 역 방향으로 여러 줄로 묶음 | |

`justify-content`: 주 축 정렬

| 값 | 의미 | 기본값 | | --- | --- | --- | | flex-start | Items를 시작점으로 정렬 | flex-start | | flex-end | Items를 끝점으로 정렬 | | | center | Items를 가운데 정렬 | | | space-between | 첫 Item은 시작점, 마지막 Item은 끝점에 정렬 후 나머지를 균등 분배 | | | space-around | 모든 Item 주변에 균등한 여백을 생성 | | | space-evenly | 모든 Item 사이의 여백을 완전히 동일하게 분배 | |

`align-content`: 교차 축 정렬 (2줄 이상)

조건: flex-wrap: wrap;이 설정되어 있고, Items가 2줄 이상일 때만 동작합니다.

| 값 | 의미 | 기본값 |

| :--- | :--- | :--- |

| stretch | Container의 교차 축을 채우기 위해 Items를 늘림 | stretch |

| flex-start | Items를 교차 축의 시작점으로 정렬 | |

| flex-end | Items를 교차 축의 끝점으로 정렬 | |

| center | Items를 교차 축의 가운데로 정렬 | |

| space-between| 시작점과 끝점에 줄을 정렬 후 나머지를 균등 분배 | |

| space-around| 모든 줄 주변에 균등한 여백을 생성 | |

| space-evenly| 모든 줄 사이의 여백을 완전히 동일하게 분배 | |

`align-items`: 교차 축 정렬 (1줄)

Items가 한 줄일 때 주로 사용합니다.

| 값 | 의미 | 기본값 |

| :--- | :--- | :--- |

| stretch | Container의 교차 축을 채우기 위해 Items를 늘림 | stretch |

| flex-start | Items를 각 줄의 시작점으로 정렬 | |

| flex-end | Items를 각 줄의 끝점으로 정렬 | |

| center | Items를 각 줄의 가운데로 정렬 | |

| baseline | Items를 문자 기준선에 정렬 | |

`gap`

아이템과 아이템 사이의 간격을 설정합니다. (10px, 10px 20px 등)

4. Flex Items 속성 (자식 요소에 적용)

| 속성 | 의미 | | --- | --- | | order | Flex Item의 순서를 설정합니다. | | flex | flex-grow, flex-shrink, flex-basis의 단축 속성입니다. | | flex-grow | Flex Item의 증가 너비 비율을 설정합니다. | | flex-shrink | Flex Item의 감소 너비 비율을 설정합니다. | | flex-basis | Flex Item의 공간 배분 전 기본 너비를 설정합니다. | | align-self | 교차 축에서 개별 Item의 정렬 방법을 설정합니다. |

`order`

Item의 순서를 숫자로 설정합니다. 숫자가 클수록 순서가 밀리며 음수도 허용됩니다. HTML 구조와 무관하게 표시 순서를 변경할 수 있습니다. (기본값: 0)

`flex`

Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성입니다.
문법: flex: <flex-grow> <flex-shrink> <flex-basis>;
주의: 단축 속성에서 flex-basis를 생략하면 기본값 auto가 아닌 0이 적용됩니다. (flex: 1;은 flex: 1 1 0;과 같습니다.)

`flex-grow`

Item의 증가 너비 비율을 숫자로 설정합니다. (기본값: 0)
Container 내 여백이 있을 때, 각 Item이 flex-grow 값의 비율에 따라 여백을 나눠 가집니다.
예시: 3개의 아이템이 flex-grow: 1;, flex-grow: 2;, flex-grow: 1; 이면, 남은 공간을 1:2:1의 비율로 나눠 가집니다.

`flex-shrink`

Item의 감소 너비 비율을 숫자로 설정합니다. (기본값: 1)
Container의 공간이 부족할 때, 각 Item이 flex-shrink 값의 비율에 따라 자신의 너비에서 줄어듭니다.
0으로 설정하면 너비가 줄어들지 않습니다. (계산이 복잡하여 활용도는 낮음)

`flex-basis`

Item의 공간 배분 전 기본 너비를 설정합니다. (기본값: auto)
auto일 경우, width나 height 값이 적용됩니다.
px, % 등 단위 값을 지정하면 해당 너비가 기본 너비가 됩니다.

`align-self`

align-items가 모든 Item에 대한 정렬이라면, align-self는 개별 Item의 교차 축 정렬 방법을 설정합니다.
align-items 속성보다 우선 적용됩니다.
사용 가능한 값: auto(기본값), stretch, flex-start, flex-end, center, baseline

CSS Flex(Flexible Box) 완벽 가이드

1. Flexbox란 무엇인가?

2. Flexbox의 기본 개념

가. 주 축(main-axis)과 교차 축(cross-axis)

나. 시작점(flex-start)과 끝점(flex-end)

3. Flex Container 속성 (부모 요소에 적용)

display

flex-direction: 주 축 방향 설정

flex-wrap: 줄 바꿈 설정

justify-content: 주 축 정렬

align-content: 교차 축 정렬 (2줄 이상)

align-items: 교차 축 정렬 (1줄)

gap