🎨 CSS Flexbox & Grid 완전 정복: 언제 뭘 써야 하는가

flex-direction: row (기본값)
────────────────────────────────→ 주축 (main axis)
│ [아이템1] [아이템2] [아이템3]
│
↓ 교차축 (cross axis)

.container {
  display: flex;

  /* 방향 */
  flex-direction: row;          /* 기본값: 가로 */
  flex-direction: column;       /* 세로 (주축이 수직으로 바뀜) */
  flex-direction: row-reverse;  /* 가로 역순 */
  flex-direction: column-reverse;

  /* 줄바꿈 */
  flex-wrap: nowrap;   /* 기본값: 한 줄에 다 욱여넣음 */
  flex-wrap: wrap;     /* 넘치면 다음 줄로 */
  flex-wrap: wrap-reverse;

  /* 주축 정렬 (justify-content) */
  justify-content: flex-start;    /* 기본값: 시작점 */
  justify-content: flex-end;      /* 끝점 */
  justify-content: center;        /* 가운데 */
  justify-content: space-between; /* 양 끝 붙이고 사이 균등 */
  justify-content: space-around;  /* 양 끝 포함 균등 (양 끝은 절반) */
  justify-content: space-evenly;  /* 모두 균등 */

  /* 교차축 정렬 (align-items) */
  align-items: stretch;     /* 기본값: 컨테이너 높이만큼 늘림 */
  align-items: flex-start;  /* 위쪽 정렬 */
  align-items: flex-end;    /* 아래쪽 정렬 */
  align-items: center;      /* 수직 가운데 */
  align-items: baseline;    /* 텍스트 기준선 맞춤 */

  /* 여러 줄일 때 줄 간격 */
  align-content: flex-start;
  align-content: space-between;

  /* 간격 */
  gap: 16px;          /* 행 열 모두 같은 간격 */
  gap: 16px 24px;     /* 행 간격, 열 간격 */
  row-gap: 16px;
  column-gap: 24px;
}

.item {
  /* flex-grow: 남은 공간을 얼마나 차지할지 */
  flex-grow: 0;   /* 기본값: 안 늘어남 */
  flex-grow: 1;   /* 가능한 공간 모두 차지 */
  flex-grow: 2;   /* flex-grow: 1 아이템의 2배 공간 */

  /* flex-shrink: 공간 부족할 때 얼마나 줄어들지 */
  flex-shrink: 1;  /* 기본값: 줄어듦 */
  flex-shrink: 0;  /* 줄어들지 않음 */

  /* flex-basis: 기본 크기 */
  flex-basis: auto;   /* 기본값: 콘텐츠 크기 */
  flex-basis: 200px;  /* 200px부터 시작 */
  flex-basis: 0;      /* flex-grow로만 크기 결정 */

  /* 단축 속성 */
  flex: 1;          /* flex: 1 1 0% */
  flex: 0 0 200px;  /* 고정 200px */
  flex: auto;       /* flex: 1 1 auto */

  /* 개별 교차축 정렬 */
  align-self: center;  /* 이 아이템만 수직 가운데 */

  /* 순서 변경 */
  order: 0;    /* 기본값 */
  order: -1;   /* 맨 앞으로 */
  order: 99;   /* 맨 뒤로 */
}

/* ❌ flex 컨테이너 안에서 width 100% 주면 의도대로 안 될 수 있음 */
.item {
  width: 100%;  /* flex 아이템은 width보다 flex-basis가 우선 */
}

/* ✅ flex-basis 사용 */
.item {
  flex: 0 0 100%;
}

/* ❌ flex-shrink 모르고 min-width 설정 */
.item {
  /* 기본적으로 아이템은 min-content 크기까지는 줄어들지 않음 */
  /* 텍스트가 긴 아이템이 예상보다 안 줄어들면 아래를 추가 */
}

/* ✅ 텍스트 넘침 해결 */
.item {
  min-width: 0;  /* 이걸 추가해야 텍스트가 overflow 처리됨 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 완벽한 가운데 정렬 */
.center-container {
  display: flex;
  justify-content: center;  /* 수평 가운데 */
  align-items: center;      /* 수직 가운데 */
  min-height: 100vh;        /* 화면 전체 높이 */
}

<div class="center-container">
  <div class="content">가운데에 있는 콘텐츠</div>
</div>

.navbar {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 60px;
}

.logo {
  margin-right: auto;  /* 나머지 공간을 logo 오른쪽에 할당 → 메뉴가 오른쪽으로 밀림 */
}

.nav-menu {
  display: flex;
  gap: 24px;
}

<nav class="navbar">
  <a class="logo" href="/">MyBrand</a>
  <ul class="nav-menu">
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

.card {
  display: flex;
  flex-direction: column;  /* 세로 배치 */
  height: 100%;            /* 높이 통일을 위해
}

.card-body {
  flex: 1;  /* 남은 공간 모두 차지 → 버튼을 항상 하단에 */
}

.card-footer {
  margin-top: auto;  /* 또는 이 방법도 가능 */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;  /* 남은 공간 모두 차지 → footer가 항상 아래 */
}

footer {
  /* 자동으로 하단에 위치 */
}

.tags {
  display: flex;
  flex-wrap: wrap;  /* 태그가 많으면 자동으로 줄바꿈 */
  gap: 8px;
}

.tag {
  padding: 4px 12px;
  background: #e2e8f0;
  border-radius: 99px;
  white-space: nowrap;
}

.grid-container {
  display: grid;

  /* 열 정의 */
  grid-template-columns: 200px 1fr 1fr;    /* 200px 고정, 나머지 1:1 */
  grid-template-columns: repeat(3, 1fr);   /* 3등분 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 반응형! */

  /* 행 정의 */
  grid-template-rows: 60px 1fr 60px;      /* 헤더, 메인, 푸터 */
  grid-template-rows: repeat(3, auto);    /* 콘텐츠 크기에 맞게 */

  /* 간격 */
  gap: 16px;
  row-gap: 24px;
  column-gap: 16px;

  /* 자동 생성되는 행의 크기 */
  grid-auto-rows: minmax(100px, auto);

  /* Named Areas */
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

/* 3:1:1 비율로 나눔 */
grid-template-columns: 3fr 1fr 1fr;

/* 200px 고정 후 나머지를 2:1로 나눔 */
grid-template-columns: 200px 2fr 1fr;

/* auto-fill: 빈 칼럼 유지 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 아이템이 3개여도 5칸이 들어갈 공간이면 5칸 유지 */

/* auto-fit: 빈 칼럼 접힘 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* 아이템이 3개면 3개가 남은 공간을 균등 분할 */

.item {
  /* 시작열, 끝열 지정 */
  grid-column: 1 / 3;        /* 1번째 선에서 3번째 선까지 */
  grid-column: 1 / span 2;   /* 1번째 열에서 2칸 차지 */
  grid-column: span 2;       /* 현재 위치에서 2칸 차지 */

  /* 시작행, 끝행 지정 */
  grid-row: 1 / 3;
  grid-row: span 2;

  /* Named Area 사용 */
  grid-area: header;

  /* 셀 내부 정렬 */
  justify-self: center;  /* 수평 */
  align-self: center;    /* 수직 */
  place-self: center;    /* 둘 다 */
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

<div class="card-grid">
  <div class="card">카드 1</div>
  <div class="card">카드 2</div>
  <div class="card">카드 3</div>
  <!-- 몇 개든 자동으로 반응형 그리드 구성 -->
</div>

.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

┌─────────────────────────────────┐
│           header                │
├──────────┬──────────────────────┤
│          │                      │
│ sidebar  │        main          │
│          │                      │
├──────────┴──────────────────────┤
│           footer                │
└─────────────────────────────────┘

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 8px;
}

/* 첫 번째 사진은 2배 크게 */
.gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* 가로로 긴 사진 */
.gallery-item.wide {
  grid-column: span 2;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12열 그리드 */
  gap: 16px;
  padding: 24px;
}

/* 통계 카드: 12열 중 3열씩 (4개) */
.stat-card {
  grid-column: span 3;
}

/* 차트: 8열 */
.chart {
  grid-column: span 8;
}

/* 사이드 패널: 4열 */
.side-panel {
  grid-column: span 4;
}

/* 테이블: 전체 너비 */
.data-table {
  grid-column: 1 / -1; /* 처음부터 끝까지 */
}

/* 기본 스타일 = 모바일 */
.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 태블릿 (768px 이상) */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .card {
    flex: 0 0 calc(50% - 8px); /* 2열 */
  }
}

/* 데스크톱 (1024px 이상) */
@media (min-width: 1024px) {
  .card {
    flex: 0 0 calc(33.333% - 11px); /* 3열 */
  }
}

/* auto-fill + minmax — 미디어 쿼리 불필요 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

/* clamp(최소값, 기본값, 최대값) */
.title {
  font-size: clamp(1.25rem, 4vw, 2.5rem);
  /* 최소 20px, 뷰포트 너비의 4%, 최대 40px */
}

.container {
  width: clamp(320px, 90%, 1200px);
  /* 최소 320px, 화면의 90%, 최대 1200px */
  margin: 0 auto;
}

:root {
  --columns: 1;
  --gap: 16px;
  --sidebar-width: 0px;
}

@media (min-width: 768px) {
  :root {
    --columns: 2;
    --gap: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --columns: 3;
    --sidebar-width: 260px;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gap);
}

/* 문제: 텍스트가 길면 아이템이 줄어들지 않음 */
.nav-item { ... }

/* 해결: min-width: 0 추가 */
.nav-item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 문제: 콘텐츠가 grid 셀을 벗어남 */
.grid-item { ... }

/* 해결: min-width: 0 또는 overflow 설정 */
.grid-item {
  min-width: 0; /* Grid에서도 동일하게 필요 */
}

/* padding이 포함된 크기 계산을 위해 전역 설정 권장 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* z-index가 안 먹힐 때 */
.item {
  position: relative; /* 또는 absolute, fixed, sticky */
  z-index: 10;
}

/* flex-shrink: 1 이 기본값이라 아이템이 줄어들 수 있음 */
.item {
  flex-shrink: 0;  /* 줄어들지 않게 고정 */
}

/* 실무에서 자주 보이는 조합 */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header {
  grid-area: header;
  display: flex;          /* 헤더 내부는 Flex */
  align-items: center;
  justify-content: space-between;
}

.main {
  grid-area: main;
  display: grid;          /* 메인 콘텐츠도 Grid */
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

.card-list {
  display: grid;          /* 카드 목록도 Grid */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  align-content: start;
}

.card {
  display: flex;          /* 카드 내부는 Flex */
  flex-direction: column;
}