CSS Flexbox

CSS Flexbox: 유연한 레이아웃 만들기

*CSS Flexbox(Flexible Box Layout)**는 웹 요소를 배치할 때, 수평 및 수직 정렬을 쉽게 구현하고, 아이템 간의 간격을 유연하게 제어할 수 있는 레이아웃 시스템입니다. Flexbox는 **한 축(주축)**을 기준으로 아이템을 정렬하고 배치하는 것이 특징입니다.

1. Flexbox의 기본 개념

Flexbox는 부모 요소(Flex 컨테이너)에 Flex 속성을 적용하여, 자식 요소들(Flex 아이템)이 유연하게 배치되도록 합니다. 이를 통해 수평/수직 정렬이 복잡한 레이아웃을 쉽게 관리할 수 있습니다.

Flex 컨테이너와 Flex 아이템

Flex 컨테이너: Flex 레이아웃이 적용된 부모 요소.
Flex 아이템: Flex 컨테이너 안의 자식 요소들.

기본 구문

.container {
  display: flex; /* Flex 컨테이너로 지정 */
}

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

2. Flexbox의 주요 속성

1) `display: flex`

Flexbox를 사용하려면 부모 요소에 display: flex를 설정해야 합니다. 이 속성을 설정하면 그 내부의 자식 요소들이 자동으로 Flex 아이템이 되어, 수평 또는 수직으로 정렬됩니다.

.container {
  display: flex; /* Flex 컨테이너 설정 */
}

2) `flex-direction`: 주축(메인 축) 설정

*flex-direction*은 Flex 아이템이 배치될 **주축(메인 축)**의 방향을 결정합니다.
row: 기본값, 가로(수평) 방향으로 배치.
column: 세로(수직) 방향으로 배치.
row-reverse: 가로 방향의 반대로 배치.
column-reverse: 세로 방향의 반대로 배치.

.container {
  display: flex;
  flex-direction: row; /* 기본 가로 정렬 */
}

.container-column {
  display: flex;
  flex-direction: column; /* 세로 정렬 */
}

3) `justify-content`: 주축(메인 축)에서의 정렬

*justify-content*는 Flex 아이템이 주축(수평/수직)에서 어떻게 정렬될지 결정합니다.
flex-start: 시작점에서 정렬 (기본값).
flex-end: 끝에서 정렬.
center: 가운데 정렬.
space-between: 아이템 사이에 고른 간격 배분.
space-around: 아이템 사이와 양 끝에 여유 공간을 둠.
space-evenly: 아이템 사이의 간격을 균등하게 배분.

.container {
  display: flex;
  justify-content: space-between; /* 아이템 사이에 간격 배분 */
}

4) `align-items`: 교차축(크로스 축)에서의 정렬

*align-items*는 Flex 아이템이 교차축(수직/수평)에서 어떻게 정렬될지 결정합니다.
flex-start: 교차축의 시작에서 정렬.
flex-end: 교차축의 끝에서 정렬.
center: 교차축의 가운데에서 정렬.
baseline: 텍스트의 기준선에 맞춰 정렬.
stretch: Flex 아이템을 늘려서 컨테이너를 채움 (기본값).

.container {
  display: flex;
  align-items: center; /* 교차축(세로) 가운데 정렬 */
}

5) `flex-wrap`: 아이템 줄바꿈

*flex-wrap*은 Flex 아이템이 컨테이너의 공간을 넘칠 때 아이템이 줄바꿈을 할지 여부를 결정합니다.
nowrap: 한 줄에 모두 배치 (기본값).
wrap: 아이템이 넘치면 다음 줄로 배치.
wrap-reverse: 줄바꿈을 반대 방향으로 배치.

.container {
  display: flex;
  flex-wrap: wrap; /* 넘치는 아이템을 다음 줄로 넘김 */
}

6) `align-content`: 여러 줄 정렬

*align-content*는 Flex 컨테이너 안에서 여러 줄의 아이템들을 어떻게 정렬할지 결정합니다. 여러 줄이 있을 때만 동작합니다.
flex-start: 시작점에서 줄 정렬.
flex-end: 끝점에서 줄 정렬.
center: 줄을 가운데 정렬.
space-between: 줄 사이에 고른 간격 배분.
space-around: 줄 사이와 양 끝에 여유 공간 배분.
stretch: 줄을 늘려서 컨테이너를 채움.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* 여러 줄을 사이에 간격을 두고 배치 */
}

7) `flex-grow`, `flex-shrink`, `flex-basis`: 아이템 크기 조절

flex-grow: 남은 공간을 아이템이 얼마나 차지할지 설정. (기본값: 0)
flex-shrink: 컨테이너가 작아질 때 아이템이 얼마나 줄어들지 설정. (기본값: 1)
flex-basis: Flex 아이템의 기본 크기 설정.

.item {
  flex-grow: 1; /* 남은 공간을 균등하게 나눔 */
}

3. 실전 예시: 기본적인 Flexbox 레이아웃

1) 수평 정렬

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

.container {
  display: flex;
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  height: 200px;
  background-color: #f1f1f1;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
}

설명

가로 및 세로 중앙 정렬: justify-content: center와 align-items: center를 사용하여 모든 아이템이 컨테이너의 가운데에 정렬됩니다.

2) 아이템의 유연한 크기 조절

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

.container {
  display: flex;
}

.item {
  flex-grow: 1; /* 남은 공간을 균등하게 나눔 */
  padding: 20px;
  margin: 10px;
  background-color: #3498db;
  color: white;
  border-radius: 5px;
}

설명

아이템 크기 조절: 각 아이템이 flex-grow: 1로 설정되어, 남은 공간을 균등하게 나눕니다.

3) 반응형 Flexbox 그리드 레이아웃

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

.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.item {
  flex: 1 1 calc(50% - 10px); /* 50% 크기, 간격을 제외한 크기 설정 */
  background-color: #3498db;
  color: white;
  text-align: center;
  padding: 20px;
}

설명

*flex-wrap: wrap*을 사용하여 아이템이 줄바꿈되도록 설정.
반응형 크기: 각 아이템은 50%의 너비를 차지하며, 화면 크기에 따라 줄바꿈됩니다.

CSS Flexbox는 유연한 레이아웃을 쉽게 구성할 수 있는 강력한 도구입니다. 수평 정렬, 수직 정렬, 아이템 간 간격 조정 등 다양한 레이아웃 작업을 간편하게 처리할 수 있어 반응형 디자인에 매우 유용합니다. Flexbox의 다양한 속성을 조합하여 복잡한 레이아웃도 손쉽게 구현할 수 있으며, 특히 동적인 웹 페이지에서 효율적인 레이아웃을 제공합니다.

코딩 스쿨 CSS