Flex Container property

플렉스박스 레이아웃의 시작이자 가장 중요한 부분인 플렉스 컨테이너(Flex Container) 속성에 대해 알아보겠습니다.

플렉스 컨테이너는 부모 요소로서, 그 안에 담긴 자식 요소(Flex Items)들이 가로로 흐를지 세로로 흐를지, 그리고 어떤 방식으로 정렬될지 전체적인 규칙을 정의합니다.

---

1. 정렬의 시작: display: flex;

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

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

---

2. 축과 방향: flex-direction

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

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

---

3. 줄 바꿈 설정: flex-wrap

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

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

---

4. 메인 축 정렬: justify-content

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

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

---

5. 교차 축 정렬: 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)**의 핵심 속성들을 각각의 코드 예제와 함께 정리해 드리겠습니다.

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

---

1. flex-direction (배치 방향)

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

CSS

 

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

---

2. flex-wrap (줄 바꿈)

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

CSS

 

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

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

---

3. justify-content (메인 축 정렬)

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

CSS

 

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

---

4. align-items (교차 축 정렬)

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

CSS

 

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

---

5. 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; 
}

---

6. 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;**의 조합이 가장 빈번하게 사용됩니다.

---

각 속성의 동작 방식을 코드로 모두 확인해 보셨습니다.

---