Flexbox로 자유자재 배치하기

1차원 배치의 종결자, Flexbox 시스템

더 이상 float나 inline-block의 마진 병합 문제로 고통받지 마세요. Tailwind CSS는 부모 컨테이너에 flex 클래스 단 한 개를 추가하는 것만으로 자식 요소들을 행(Row) 또는 열(Column)로 유려하게 직렬 정렬하며, 주축과 교차축의 모든 축 정렬을 완벽히 제공합니다.

💡 실무 팁: flex-1 vs flex-auto vs shrink-0

자식 요소가 부모 너비를 유연하게 채워야 하는 메인 본문엔 flex-1을 적용하고, 아이콘이나 이미지같이 절대 찌그러지면 안 되는 고정 크기 요소에는 반드시 shrink-0을 적용하세요. flex 레이아웃 안의 아이콘이 쪼그라드는 고질적 현상을 1초 만에 수정할 수 있습니다.

속성 종류	Tailwind 클래스	CSS 물리 원리	적용 시각 효과
방향 설정	`flex-row` `flex-col`	`flex-direction: row;` `flex-direction: column;`	가로 직렬 정렬 세로 일렬 정렬
주축 정렬	`justify-center` `justify-between`	`justify-content: center;` `justify-content: space-between;`	가로 중앙 밀착 양쪽 끝 배치 후 자동 마진
교차축 정렬	`items-center` `items-stretch`	`align-items: center;` `align-items: stretch;`	세로 기준 정중앙 정렬 부모 높이에 맞춰 길게 늘임
간격 조율	`gap-4` `gap-x-6`	`gap: 1rem;` `column-gap: 1.5rem;`	자식 간의 물리적 간격(16px) 좌우 자식 간격(24px) 지정

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Flexbox Interactive Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen text-slate-200 p-8 flex items-center justify-center">

  <div class="max-w-2xl w-full bg-slate-800 rounded-2xl p-6 border border-slate-700 shadow-2xl space-y-6">
    <div class="border-b border-slate-700 pb-4">
      <h2 class="text-2xl font-extrabold text-white">Flexbox Align Playground</h2>
      <p class="text-sm text-slate-400 mt-1">주축 정렬(Justify-Content) 옵션을 클릭하여 자식 카드의 배치를 조절해보세요!</p>
    </div>

    <!-- Interactive Container -->
    <div id="flex-container" class="bg-slate-950 rounded-xl p-4 min-h-[160px] flex items-center gap-4 transition-all duration-300">
      <div class="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center font-black text-xl text-white shadow-lg">1</div>
      <div class="w-16 h-16 bg-pink-500 rounded-xl flex items-center justify-center font-black text-xl text-white shadow-lg">2</div>
      <div class="w-16 h-16 bg-indigo-500 rounded-xl flex items-center justify-center font-black text-xl text-white shadow-lg">3</div>
    </div>

    <!-- Controls -->
    <div class="grid grid-cols-3 gap-2">
      <button onclick="alignFlex('justify-start')" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 rounded-lg text-sm transition-all">
        justify-start
      </button>
      <button onclick="alignFlex('justify-center')" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 rounded-lg text-sm transition-all">
        justify-center
      </button>
      <button onclick="alignFlex('justify-between')" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded-lg text-sm transition-all shadow-md shadow-indigo-600/20">
        justify-between
      </button>
    </div>
  </div>

</body>
</html>

🔒 localhost:8000/preview

1차원 배치의 종결자, Flexbox 시스템

💡 실무 팁: flex-1 vs flex-auto vs shrink-0

속성 종류	Tailwind 클래스	CSS 물리 원리	적용 시각 효과
방향 설정	`flex-row` `flex-col`	`flex-direction: row;` `flex-direction: column;`	가로 직렬 정렬 세로 일렬 정렬
주축 정렬	`justify-center` `justify-between`	`justify-content: center;` `justify-content: space-between;`	가로 중앙 밀착 양쪽 끝 배치 후 자동 마진
교차축 정렬	`items-center` `items-stretch`	`align-items: center;` `align-items: stretch;`	세로 기준 정중앙 정렬 부모 높이에 맞춰 길게 늘임
간격 조율	`gap-4` `gap-x-6`	`gap: 1rem;` `column-gap: 1.5rem;`	자식 간의 물리적 간격(16px) 좌우 자식 간격(24px) 지정