플렉스 박스(Flexbox) 레이아웃

플렉스 박스(Flexbox)는 CSS3에서 제공하는 레이아웃 모델로, 요소들을 쉽고 유연하게 정렬할 수 있도록 도와줍니다. 플렉스 박스는 가로 축과 세로 축을 기반으로 아이템을 정렬하며, 다양한 화면 크기와 장치에 대응할 수 있는 반응형 웹 디자인에 특히 유용합니다.

1. 기본 개념

플렉스 박스 레이아웃은 두 가지 핵심 요소로 구성됩니다:

• 컨테이너(Flex Container): 플렉스 레이아웃을 적용할 부모 요소.
• 아이템(Flex Item): 플렉스 컨테이너 안에 들어가는 자식 요소들.

2. 플렉스 컨테이너 설정

플렉스 박스를 사용하려면 부모 요소에 display: flex 속성을 지정해야 합니다.

.container {
  display: flex;
}

이렇게 하면 container 안에 있는 모든 자식 요소가 플렉스 아이템이 됩니다.

---

3. 주요 속성

3.1 플렉스 컨테이너 속성

1. flex-direction: 아이템들이 어느 방향으로 배치될지를 결정합니다.
   • row (기본값): 아이템이 가로로 배치됩니다.
   • column: 아이템이 세로로 배치됩니다.
   • row-reverse: 가로 방향으로 역순 배치.
   • column-reverse: 세로 방향으로 역순 배치.

   .container {
     flex-direction: row;
   }

2. justify-content: 아이템을 주 축(main axis, 가로 축)을 기준으로 정렬합니다.
   • flex-start: 아이템을 왼쪽으로 정렬.
   • flex-end: 아이템을 오른쪽으로 정렬.
   • center: 아이템을 가운데로 정렬.
   • space-between: 아이템 사이에 균등한 간격.
   • space-around: 아이템 주변에 일정한 간격.

   .container {
     justify-content: space-between;
   }

3. align-items: 아이템을 교차 축(cross axis, 세로 축)을 기준으로 정렬합니다.
   • flex-start: 교차 축의 시작점에 아이템을 정렬.
   • flex-end: 교차 축의 끝점에 아이템을 정렬.
   • center: 교차 축의 가운데에 정렬.
   • stretch: 아이템을 컨테이너 높이에 맞게 늘림.
   • baseline: 텍스트의 기준선에 맞춰 정렬.

   .container {
     align-items: center;
   }

4. flex-wrap: 아이템이 한 줄에 다 들어가지 않을 때 줄 바꿈을 할지 설정합니다.
   • nowrap (기본값): 줄 바꿈을 하지 않음.
   • wrap: 줄 바꿈을 허용.
   • wrap-reverse: 줄 바꿈을 하되, 역순으로 쌓습니다.

   .container {
     flex-wrap: wrap;
   }

5. align-content: 여러 줄로 나뉘어진 아이템들의 세로 축 정렬을 설정합니다. flex-wrap이 활성화된 상태에서만 적용됩니다.
   • flex-start: 아이템들을 상단에 정렬.
   • flex-end: 아이템들을 하단에 정렬.
   • center: 아이템들을 가운데 정렬.
   • space-between: 줄 사이에 균등한 간격을 줍니다.
   • space-around: 줄 주변에 일정한 간격을 줍니다.

   .container {
     align-content: center;
   }

---

3.2 플렉스 아이템 속성

1. flex-grow: 남은 공간을 얼마나 더 차지할지를 설정합니다. 기본값은 0이며, 값이 클수록 더 많은 공간을 차지합니다.
2. .item { flex-grow: 1; }
3. flex-shrink: 공간이 부족할 때 얼마나 줄어들지를 설정합니다. 기본값은 1입니다.
4. .item { flex-shrink: 1; }
5. flex-basis: 아이템의 기본 크기를 설정합니다. width나 height 대신 사용됩니다.
6. .item { flex-basis: 200px; }
7. align-self: 개별 아이템에 대해 세로 축에서의 정렬을 설정합니다. align-items 속성을 덮어씁니다.
   • auto (기본값), flex-start, flex-end, center, stretch, baseline.

   .item {
     align-self: center;
   }

---

4. 플렉스 박스 예제

예시 1: 기본 플렉스 박스 레이아웃

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

<style>
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .item {
    background-color: lightblue;
    padding: 20px;
    margin: 10px;
  }
</style>

예시 2: 아이템 크기 설정 및 줄 바꿈

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

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .item {
    flex-basis: 200px;
    background-color: lightgreen;
    padding: 20px;
    margin: 10px;
  }
</style>

---

5. 플렉스 박스의 장점

• 중앙 정렬: 플렉스 박스를 사용하면, 요소를 가로와 세로 축에서 쉽게 중앙 정렬할 수 있습니다.
• 반응형 디자인: 화면 크기에 따라 요소들을 자동으로 재배치할 수 있어 반응형 웹 디자인에 유용합니다.
• 복잡한 레이아웃을 간단하게: 수직 정렬, 아이템 간의 간격 조절 등을 손쉽게 할 수 있습니다.

---

6. 플렉스 박스 관련 추가 정보

• 플렉스와 그리드 비교: 플렉스 박스는 주로 1차원 레이아웃을 다루는 데 적합하며, CSS 그리드는 2차원 레이아웃(가로+세로)을 다루는 데 적합합니다.
• 플렉스 아이템 순서 변경: order 속성을 사용하여 플렉스 아이템의 순서를 자유롭게 변경할 수 있습니다.

.item {
  order: 2; /* 기본값은 0 */
}

---

요약

플렉스 박스 레이아웃은 웹 요소를 쉽게 정렬하고 배치할 수 있는 1차원 레이아웃 모델입니다. display: flex 속성을 사용하여 요소들을 수평 또는 수직으로 정렬하며, 중앙 정렬, 여백 조절, 반응형 레이아웃 구현에 유용합니다. 다양한 속성(flex-direction, justify-content, align-items 등)을 사용해 유연하고 직관적인 레이아웃을 만들 수 있습니다.