Flexbox

현대 웹 디자인에서 가장 널리 쓰이는 레이아웃 시스템인 **플렉스박스(Flexbox)**의 기본 개념을 정리해 드리겠습니다.

---

1. 정의 (Definition)

**플렉스박스(Flexbox)**는 'Flexible Box'의 줄임말로, 행(Row) 또는 열(Column)을 주축으로 하여 요소를 배치하는 1차원 레이아웃 모델입니다.

복잡한 계산 없이도 요소의 크기를 유동적으로 조절하고, 정렬하며, 빈 공간을 배분할 수 있도록 설계된 인터페이스입니다.

---

2. 특징 및 장점 (Key Features & Advantages)

• 방향의 자유로움: 가로(행) 또는 세로(열) 중 원하는 방향으로 요소를 쉽게 나열할 수 있습니다.
• 유동적인 크기: 컨테이너의 크기에 맞춰 자식 요소들의 너비나 높이를 자동으로 늘리거나 줄일 수 있습니다.
• 간편한 정렬: 과거 float이나 inline-block으로 구현하기 힘들었던 '수직 중앙 정렬'이나 '균등 분할'을 단 한 줄의 코드로 해결합니다.
• 순서 변경: HTML 구조를 바꾸지 않고도 CSS 속성만으로 화면에 보이는 요소의 순서를 뒤바꿀 수 있습니다.

---

3. 용어 설명 (Terminology)

플렉스박스를 제대로 다루기 위해서는 두 가지 핵심 영역과 축(Axis)의 개념을 이해해야 합니다.

1) 주체(Entities)

• Flex Container (부모): display: flex;가 적용된 요소입니다. 자식 요소들을 배치하는 '틀' 역할을 합니다.
• Flex Item (자식): 컨테이너 안에 담긴 개별 요소들입니다. 부모가 정한 규칙에 따라 움직입니다.

2) 축(Axes)

• 주축 (Main Axis): 아이템이 배치되는 기본 방향입니다. flex-direction 설정에 따라 가로가 될 수도, 세로가 될 수도 있습니다.
• 교차 축 (Cross Axis): 주축과 수직을 이루는 축입니다. 주축이 가로라면 교차 축은 세로가 됩니다.

3) 시작점과 끝점 (Start & End)

• Main Start / Main End: 주축이 시작되고 끝나는 지점입니다.
• Cross Start / Cross End: 교차 축이 시작되고 끝나는 지점입니다.

---

📋 플렉스박스 기본 구조 요약표

용어	설명	비고
Flex Container	부모 요소	display: flex 선언 필요
Flex Item	자식 요소	부모 내부에서 정렬되는 대상
Main Axis	주축	아이템 배치의 기준선
Cross Axis	교차 축	주축과 직각을 이루는 축

---

학습 정리

• 플렉스박스는 1차원 레이아웃이므로, 한 번에 가로와 세로를 동시에 대규모로 배치할 때는 **그리드(Grid)**가 더 유리할 수 있습니다.
• 모든 정렬의 기준은 **주축(Main Axis)**이 어디냐에 따라 결정되므로 방향 설정을 가장 먼저 확인해야 합니다.

---

플렉스박스의 기본 개념과 용어를 완벽히 정리하셨습니다!

---