챗GPT가 알려주는 Flexbox

📌 Flexbox(Flexible Box)란?

Flexbox는 CSS의 레이아웃 모델 중 하나로, 아이템들을 효율적으로 정렬하고 배치할 수 있도록 도와주는 기술입니다. 기존의 float, inline-block을 사용할 때보다 더 쉽게 가로/세로 정렬을 조정할 수 있습니다.

🎯 Flexbox의 주요 특징

✅ 수직 정렬과 가로 정렬을 쉽게 조정 가능
✅ 컨테이너 크기에 따라 아이템 크기 자동 조정
✅ 반응형 레이아웃을 간편하게 구현 가능

---

🏗️ 1. Flexbox의 기본 개념

Flexbox는 크게 두 가지 요소로 구성됩니다.

용어	설명
Flex Container (부모 요소)	display: flex;를 적용한 요소
Flex Items (자식 요소)	Flex 컨테이너 내부에 있는 요소들

✅ 기본 예제

.container {
  display: flex; /* Flexbox 활성화 */
  border: 2px solid black;
}

.item {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

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

👉 이렇게 하면 .container 안의 .item들이 자동으로 가로 정렬됩니다.

---

🎯 2. Flex Container(부모 요소) 속성

부모 요소(display: flex;가 적용된 컨테이너)에서 사용되는 주요 속성들은 다음과 같습니다.

✅ (1) display

.container {
  display: flex; /* 기본 가로 정렬 */
  /* display: inline-flex;  (인라인 요소로 배치) */
}

• flex: 블록 요소처럼 배치됨
• inline-flex: 인라인 요소처럼 배치됨

---

✅ (2) flex-direction (주 축 방향 설정)

주 축(main axis)의 방향을 결정하는 속성입니다.

.container {
  flex-direction: row; /* 기본값: 가로 방향 */
}

 

값	설명
row	기본값, 왼쪽 → 오른쪽 (가로 정렬)
row-reverse	오른쪽 → 왼쪽 (가로 반전)
column	위 → 아래 (세로 정렬)
column-reverse	아래 → 위 (세로 반전)

🔹 예제:

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

👉 아이템들이 세로 방향으로 정렬됩니다.

---

✅ (3) justify-content (주 축 정렬)

가로축(main axis)에서 아이템들을 정렬하는 속성입니다.

.container {
  justify-content: center; /* 중앙 정렬 */
}

값	설명
flex-start	(기본값) 왼쪽 정렬
flex-end	오른쪽 정렬
center	중앙 정렬
space-between	양쪽 끝 배치, 나머지 균등 배치
space-around	각 아이템의 양쪽에 동일한 여백 추가
space-evenly	모든 여백을 균등하게 배치

🔹 예제:

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

👉 아이템들이 양쪽 끝에 배치되고, 사이 간격이 균등하게 나뉩니다.

---

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

세로축(cross axis)에서 아이템들을 정렬하는 속성입니다.

.container {
  align-items: center; /* 세로 중앙 정렬 */
}

값	설명
stretch	(기본값) 높이를 컨테이너에 맞춤
flex-start	위쪽 정렬
flex-end	아래쪽 정렬
center	세로 중앙 정렬
baseline	텍스트 기준선 정렬

🔹 예제:

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

👉 아이템들이 컨테이너의 아래쪽에 정렬됩니다.

---

✅ (5) flex-wrap (줄 바꿈 설정)

아이템들이 컨테이너를 넘어갈 경우 줄 바꿈을 허용할지 여부를 설정합니다.

.container {
  flex-wrap: wrap; /* 자동 줄 바꿈 */
}

값	설명
nowrap	(기본값) 한 줄 유지
wrap	여러 줄로 배치
wrap-reverse	줄 바꿈을 거꾸로 적용

🔹 예제:

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

👉 아이템들이 컨테이너 너비를 넘어가면 자동으로 줄 바뀝니다.

---

✅ (6) align-content (여러 줄 정렬, flex-wrap과 함께 사용)

여러 줄을 정렬하는 속성입니다. (flex-wrap: wrap; 상태에서만 효과 있음)

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

값	설명
stretch	(기본값) 행의 높이를 컨테이너에 맞춤
flex-start	위쪽 정렬
flex-end	아래쪽 정렬
center	중앙 정렬
space-between	첫 행은 위, 마지막 행은 아래, 나머지는 균등 정렬
space-around	각 행의 위아래 여백을 균등 배치

---

🎯 3. Flex Item(자식 요소) 속성

✅ (1) flex-grow (확장 비율)

컨테이너가 커질 때 각 아이템이 차지하는 비율을 정합니다.

.item {
  flex-grow: 1; /* 동일한 비율로 크기 조정 */
}

✅ (2) flex-shrink (축소 비율)

컨테이너가 작아질 때 각 아이템의 축소 비율을 설정합니다.

.item {
  flex-shrink: 0; /* 줄어들지 않음 */
}

✅ (3) flex-basis (기본 크기)

아이템의 기본 크기를 설정합니다.

.item {
  flex-basis: 200px; /* 기본 너비 200px */
}

✅ (4) align-self (개별 아이템 정렬)

개별 아이템에 대해 align-items를 덮어씁니다.

.item {
  align-self: center; /* 해당 아이템만 세로 중앙 정렬 */
}

---

🎯 4. 정리 (필수 속성 한눈에 보기)

속성	설명
display: flex;	Flexbox 활성화
flex-direction	주 축 방향 설정
justify-content	주 축에서 아이템 정렬
align-items	교차 축에서 아이템 정렬
flex-wrap	줄 바꿈 여부 설정
align-content	여러 줄 정렬
flex-grow	확장 비율
flex-shrink	축소 비율
flex-basis	기본 크기 설정

---

★ flex는 flex-grow, flex-shrink, flex-basis의 단축 속성

ex ) flex: 1 1 100px;