CSS의 핵심: "display:flex" 초보 가이드

현대 웹 디자인에서 display: flex는 빠르고 유연하게 레이아웃을 구성할 수 있는 강력한 도구입니다.

플렉스(Flexbox)는 CSS 레이아웃 방식 중 하나로, 요소 간 정렬과 배치를 쉽게 처리할 수 있도록 설계되었습니다.

 

 

1. Flexbox란 무엇인가?

Flexbox(Flexible Box Layout)는 1차원 레이아웃을 다루는 CSS 모델로, 요소를 행(row)이나 열(column)로 정렬하고 배치하는 데 사용됩니다. 플렉스 컨테이너(부모 요소)와 플렉스 아이템(자식 요소)의 관계를 기반으로 작동하며, 요소 간의 간격, 크기 조정, 정렬 등을 간단히 처리할 수 있습니다.

 

2. 기본문법

.container {
  display: flex;
}

- 플렉스 컨테이너: display: flex가 적용된 부모 요소.
- 플렉스 아이템: 컨테이너 내부에 있는 자식 요소들.

 

예제 html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

 

예제 css

.container {
  display: flex;
  background: lightgray;
  padding: 10px;
}

.item {
  background: coral;
  padding: 20px;
  margin: 5px;
}

 

 

 

3. 주요 속성

1) 플렉스 컨테이너 속성

컨테이너의 동작을 제어하는 속성들입니다.

1. flex-direction:
- 플렉스 아이템의 정렬 방향을 설정합니다.
- 기본값은 row(가로 정렬)입니다.

값	설명
row	가로 방향(왼쪽 → 오른쪽).
row-reverse	가로 방향(오른쪽 → 왼쪽).
column	세로 방향(위 → 아래).
column-reverse	세로 방향(아래 → 위).

 

예제

.container {
  display: flex;
  flex-direction: column;
}

 

 

2. justify-content:
- 플렉스 아이템의 가로축 정렬을 설정합니다.

값	설명
flex-start	시작점 정렬(기본값).
flex-end	끝점 정렬.
center	가운데 정렬.
space-between	양 끝은 고정, 아이템 사이를 균등하게 배치.
space-around	각 아이템을 균등하게 배치.
space-evenly	아이템과 간격을 모두 균등하게 배치.

 

예제

.container {
  display: flex;
  justify-content: center;
}

 

 

3. align-items:
- 플렉스 아이템의 세로축 정렬을 설정합니다.

값	설명
flex-start	상단 정렬.
flex-end	하단 정렬.
center	가운데 정렬.
stretch	아이템을 컨테이너 높이에 맞게 늘림(기본값).
baseline	텍스트 기준선에 맞춤.

 

예제

.container {
  display: flex;
  align-items: center;
}

 

4. flex-wrap:
- 플렉스 아이템이 줄바꿈을 할지 여부를 설정합니다.

값	설명
nowrap	줄바꿈 없음(기본값).
wrap	줄바꿈 허용.
wrap-reverse	줄바꿈 허용, 역방향으로 정렬.

 

예제

.container {
  display: flex;
  flex-wrap: wrap;
}

 

 

2) 플렉스 아이템 속성

- 플렉스 아이템의 크기와 배치를 제어하는 속성들입니다.

1. flex:
- 아이템의 크기 비율을 설정합니다.
- flex-grow, flex-shrink, flex-basis를 단축형으로 설정합니다.

 

예제

.item {
  flex: 1; /* 모든 아이템이 동일한 크기를 차지 */
}

 

 

2. order:
- 플렉스 아이템의 순서를 변경합니다.
- 기본값은 0이며, 값이 낮을수록 앞에 배치됩니다.

 

예제

.item:first-child {
  order: 2; /* 첫 번째 아이템이 뒤로 이동 */
}

 

 

3. align-self:
- 개별 아이템의 세로축 정렬을 설정합니다.
- align-items와 동일한 값 사용 가능

 

예제

.item {
  align-self: flex-end;
}

 

 

 

 

 

5. Flexbox의 장점

- 유연한 배치: 크기, 간격, 정렬을 직관적으로 제어 가능.
- 중앙 정렬 간편: 복잡한 정렬도 간단히 구현.
- 반응형 디자인에 적합: 화면 크기에 따라 요소를 유연하게 조정.

 

 

6. Flexbox의 한계

- 1차원 레이아웃에 최적화되어, 복잡한 2차원 레이아웃은 display: grid가 더 적합.
- 복잡한 배치가 필요한 경우 다소 제약적일 수 있음.

 

 

display: flex는 CSS에서 가장 유용한 레이아웃 도구 중 하나로, 단순한 정렬부터 유연한 배치까지 다양한 상황에서 활용할 수 있습니다. Flexbox의 특성과 주요 속성을 이해하면 웹 레이아웃 설계가 훨씬 더 쉬워질 것입니다.