Flexbox란 무엇인가?

Flexbox는 **일차원 레이아웃(one-dimensional layout)**을 위해 설계된 관련 CSS 속성들의 집합으로, 컨테이너 내부의 빈 공간을 자식 요소들이 자동으로 분배하도록 돕습니다.
원래 핵심 목표는 개발자가 일일이 너비나 마진을 계산하지 않아도 되도록, 브라우저가 컨테이너 안의 빈 공간을 자식 요소들에 알아서 나눠주게 하는 것이었습니다.
또한 Flexbox는 **가로·세로 정렬(horizontal & vertical alignment)**을 매우 간단하게 처리할 수 있는데, 이는 기존 CSS에서는 까다로웠던 수직 중앙 정렬이나 동일 높이 컬럼(equal-height columns) 문제를 손쉽게 해결해 줍니다.
결과적으로 구식 float 기반 레이아웃을 대체하고, 더 간결하고 유지보수하기 쉬운 HTML/CSS 코드를 작성할 수 있게 해 줍니다.

---

중요한 용어 정리

• Flex Container: display: flex 또는 display: inline-flex가 적용된 부모 요소
• Flex Items: 위 컨테이너의 직속 자식 요소들
• Main Axis: flex-direction으로 정의된 주(主) 축
• Cross Axis: 주 축에 수직인 축

---

Flex Container에 적용 가능한 주요 속성

1. display: flex
   Flexbox 레이아웃을 활성화하는 시작점
2. gap
   Flex 아이템 사이의 간격을 정의
3. justify-content
   주 축(main axis) 상에서 아이템 정렬 (예: center, space-between)\
4. align-items
   교차 축(cross axis) 상에서 아이템 정렬 (예: center, stretch)
5. flex-direction
   주 축의 방향 설정 (예: row, column)
6. flex-wrap
   아이템이 줄 바꿈될지 여부 지정
7. align-content
   여러 줄의 교차 축 정렬 방식 정의

.container {
  display: flex;
  gap: 20px;               /* 아이템 간 간격 */ 
  justify-content: center; /* 주 축 중앙 정렬 */
  align-items: center;     /* 교차 축 중앙 정렬 */
}

---

Flex Items에 적용 가능한 주요 속성

1. align-self
   개별 아이템의 교차 축 정렬을 컨테이너(align-items)와 별도로 조정
2. flex
   flex-grow, flex-shrink, flex-basis의 단축(shorthand) 속성으로, 아이템 크기 비율 및 기본 크기 설
3. order
   시각적 표시 순서를 변경하되, HTML 소스 순서는 그대로 유지

.item {
  flex: 1;   /* grow:1, shrink:1, basis:0 */
  order: 2;  /* 두 번째 위치로 표시 */
}