CSS Flex 완전정복

.container {
  display: flex; /* flex 활성화 — 자식들이 가로로 나열됨 */
}

/* flex 적용 전: 블록 요소라 세로로 쌓임 */
/* flex 적용 후: 자식들이 자동으로 가로로 나열 */

flex-direction: row; /* 기본값 — 가로 (왼→오) */
flex-direction: column; /* 세로 (위→아래) */
flex-direction: row-reverse; /* 가로 역순 (오→왼) */
flex-direction: column-reverse; /* 세로 역순 (아래→위) */

justify-content: flex-start; /* 기본값 — 시작점 밀착 */
justify-content: flex-end; /* 끝점 밀착 */
justify-content: center; /* 가운데 정렬 */
justify-content: space-between;/* 양끝 붙이고 사이 균등 — 피그마 auto */
justify-content: space-around; /* 양쪽 여백 = 사이 여백의 절반 */
justify-content: space-evenly; /* 모든 여백 동일 */

align-items: stretch; /* 기본값 — 부모 높이만큼 늘어남 */
align-items: flex-start; /* 교차축 시작점 정렬 */
align-items: flex-end; /* 교차축 끝점 정렬 */
align-items: center; /* 교차축 가운데 정렬 */

gap: 20px; /* 가로세로 동일 */
gap: 20px 10px; /* 행간격 열간격 */
column-gap: 20px; /* 가로 간격만 */
row-gap: 10px; /* 세로 간격만 */

/* 기본값 0 = 늘어나지 않음 */
.item { flex-grow: 0; } /* 내용 크기만큼만 차지 */
.item { flex-grow: 1; } /* 남은 공간 균등하게 차지 — 피그마 Fill */
.item { flex-grow: 2; } /* 다른 아이템보다 2배 더 차지 */

/* 기본값 1 = 공간 부족하면 자동으로 줄어듦 */
.item { flex-shrink: 1; } /* 기본값 — 공간 부족하면 균등하게 줄어듦 */
.item { flex-shrink: 0; } /* 절대 줄어들지 않음 — 크기 고정 */
.item { flex-shrink: 2; } /* 다른 아이템보다 2배 더 줄어듦 */

/* flex-basis: grow/shrink 적용 전 기본 너비 */
.item { flex-basis: auto; } /* 기본값 — 내용 크기만큼 (피그마 Hug) */
.item { flex-basis: 200px; } /* 기본 너비 200px로 시작 */
.item { flex-basis: 0; } /* 기본 크기 0 — grow 비율만으로 크기 결정 */

/* 단축 속성: flex: grow shrink basis */
.item { flex: 1; } /* = flex: 1 1 0 */
.item { flex: 0 1 auto; } /* 기본값 */
.item { flex: 0 0 200px; } /* 200px 고정 (grow도 shrink도 안 함) */

/* align-self: 해당 아이템만 교차축 정렬 변경 */
.item-special { align-self: center; }
/* 부모의 align-items를 무시하고 개별 적용 */

/* order: HTML 순서 안 바꾸고 시각적 순서 변경 */
.item { order: 0; } /* 기본값 */
.first { order: -1; } /* 숫자 작을수록 앞으로 */
.last { order: 1; } /* 숫자 클수록 뒤로 */

/* flex-wrap: 줄바꿈 여부 */
flex-wrap: nowrap; /* 기본값 — 줄바꿈 없이 강제로 줄임 */
flex-wrap: wrap; /* 넘치면 다음 줄로 — 피그마 wrap */

/* align-content: wrap 됐을 때 여러 줄 정렬 */
/* 전제조건: flex-wrap: wrap + 두 줄 이상일 때만 작동 */
align-content: flex-start; /* 위쪽으로 몰기 */
align-content: center; /* 가운데 */
align-content: space-between; /* 줄 사이 균등 분배 */

ul { display: flex; column-gap: 20px; }
ul > li {
  flex-grow: 1; /* 남은 공간 균등 분배 */
  flex-basis: 100%; /* 기본 너비 동일하게 */
  overflow: hidden; /* 넘치는 텍스트 숨김 */
}

section { display: flex; gap: 40px; }
.txt-box { flex: 0 0 200px; } /* 고정 너비, 줄어들지 않음 */
.list-box {
  flex: 1; /* 남은 공간 채우기 */
  display: flex; /* 자식도 flex */
  flex-direction: column; /* 세로 배치 */
  gap: 12px;
}