Flex와 방향 활성화
flex로 플렉스박스를 활성화하고, flex-row와 flex-col로 행 또는 열 레이아웃을 선택하며, 플렉스 컨테이너 모델을 이해합니다.
Flex와 방향 활성화은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.
What Is Flexbox?
Flexbox is a CSS layout model designed for arranging items in a single dimension — either a row or a column. It excels at distributing space among items, aligning them along axes, and handling flexible item sizes. Before Flexbox, horizontal centering and equal-height columns required CSS tricks; Flexbox makes these trivial. Tailwind exposes the entire Flexbox API through utility classes.
Enabling Flex With the flex Class
Apply flex to any element to make it a flex container. Its direct children become flex items that participate in the flex layout. By default, flex items line up in a row (left to right) and stretch to fill the container's height. Everything about how the children arrange themselves is controlled by utilities applied to the parent container.
<!-- Without flex: items stack vertically as blocks -->
<div>
<div class="bg-blue-200 p-4">Item 1</div>
<div class="bg-blue-300 p-4">Item 2</div>
</div>
<!-- With flex: items align in a row -->
<div class="flex">
<div class="bg-blue-200 p-4">Item 1</div>
<div class="bg-blue-300 p-4">Item 2</div>
</div>inline-flex for Inline Containers
inline-flex creates a flex container that behaves like an inline element — it does not take up a full line width. This is useful for icon-with-label components, button groups, and tags that need to align their internal content with flexbox while still flowing inline with surrounding text or other inline elements.
<!-- inline-flex: the button is inline but content aligns with flex -->
<p class="text-gray-700">
Click the
<button class="inline-flex items-center gap-1 bg-indigo-100 text-indigo-700 px-2 py-1 rounded font-medium text-sm">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"/></svg>
Add Item
</button>
button to continue.
</p>Flex Row Direction
flex-row is the default direction — items flow left to right (in LTR layouts). You rarely need to write it explicitly, but it is useful when resetting a flex-col applied at a smaller breakpoint. The main axis runs horizontally (left to right), and the cross axis runs vertically (top to bottom) in row direction.
<!-- Explicit row direction (same as default) -->
<div class="flex flex-col md:flex-row gap-4">
<div class="bg-indigo-100 p-4 rounded flex-1">Stacks vertically on mobile</div>
<div class="bg-indigo-200 p-4 rounded flex-1">Aligns horizontally on desktop</div>
</div>Flex Column Direction
flex-col makes the main axis run vertically — items stack from top to bottom like normal block elements, but now they participate in flexbox alignment and size distribution. This is the foundation for sidebars, card layouts, and any design where vertical stacking needs the power of flexbox alignment utilities like items-center or justify-between.
<!-- Vertical sidebar layout -->
<aside class="flex flex-col h-screen bg-gray-900 text-white w-64">
<div class="p-6 border-b border-gray-700">
<span class="text-xl font-bold">Logo</span>
</div>
<nav class="flex-1 p-4 space-y-1">
<a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-800">Dashboard</a>
<a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-800">Settings</a>
</nav>
<div class="p-4 border-t border-gray-700">
<span class="text-sm text-gray-400">User Profile</span>
</div>
</aside>Reversed Directions
flex-row-reverse and flex-col-reverse flip the visual order of flex items without changing the HTML source order. This is useful for RTL support and for certain layout patterns where the visual and DOM order need to differ. Note that only the visual order changes — keyboard navigation and screen reader order still follow the DOM order.
<!-- Reverse row: icons appear on the right of their labels -->
<div class="flex flex-row-reverse items-center gap-2">
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 12l-6-6h12l-6 6z"/>
</svg>
<span class="text-gray-700">Sort by Date</span>
</div>The Flex Container Model
Understanding the flex container model is key to mastering Tailwind layout. The main axis is the primary direction (row = horizontal, column = vertical). The cross axis is perpendicular to it. justify-* controls alignment along the main axis; items-* controls alignment along the cross axis. All flex utilities you will learn next operate within this two-axis model.
/* Flex row:
Main axis: horizontal (left → right)
Cross axis: vertical (top → bottom)
justify-*: controls left/right positioning
items-*: controls top/bottom positioning
Flex column:
Main axis: vertical (top → bottom)
Cross axis: horizontal (left → right)
justify-*: controls top/bottom positioning
items-*: controls left/right positioning
*/A Practical Navbar in Flex Row
The navbar is the quintessential flex row layout. A container with flex items-center aligns everything vertically centered on the cross axis. justify-between pushes the logo to the left and the nav links to the right. Each of these layout properties is applied to the parent container, controlling all children simultaneously.
<header class="flex items-center justify-between px-8 py-4 bg-white shadow">
<span class="text-xl font-bold text-indigo-600">Brand</span>
<nav class="flex items-center gap-6">
<a href="#" class="text-sm text-gray-600 hover:text-gray-900">Products</a>
<a href="#" class="text-sm text-gray-600 hover:text-gray-900">Pricing</a>
<a href="#" class="text-sm bg-indigo-600 text-white px-4 py-2 rounded-lg">Get Started</a>
</nav>
</header>Centering With Flex
Perfect centering — both horizontally and vertically — is trivially easy with flexbox: apply flex items-center justify-center to the container. This works regardless of the container's size and the content's size, without knowing any dimensions in advance. This pattern is used for loading spinners, empty state illustrations, modal dialogs, and full-page landing sections.
<!-- Perfect centering: horizontal and vertical -->
<div class="min-h-screen flex items-center justify-center bg-gray-50">
<div class="bg-white rounded-2xl shadow-lg p-12 text-center">
<h1 class="text-3xl font-bold text-gray-900">Perfectly Centered</h1>
<p class="text-gray-500 mt-2">No margin math required.</p>
</div>
</div>Flex With Responsive Direction
A very common pattern is stacking elements vertically on mobile and placing them side by side on desktop. Use flex flex-col md:flex-row: items stack on mobile, and at the md breakpoint they switch to a horizontal row. This single class change handles the entire responsive layout behavior without any media query CSS.
<!-- Feature section: stack on mobile, row on desktop -->
<section class="flex flex-col md:flex-row gap-8 px-6 py-16">
<div class="flex-1 bg-indigo-50 rounded-xl p-8">
<h3 class="font-bold text-xl mb-2">Feature One</h3>
<p class="text-gray-600">Description of feature one.</p>
</div>
<div class="flex-1 bg-pink-50 rounded-xl p-8">
<h3 class="font-bold text-xl mb-2">Feature Two</h3>
<p class="text-gray-600">Description of feature two.</p>
</div>
</section>Nested Flex Containers
Flex containers can be nested. An outer flex flex-col manages the page layout (header, main, footer), while inner flex containers manage component layouts (navbar items, card contents). Each flex context is independent — the inner flex container's utilities do not affect the outer one. Nesting flexboxes is the normal pattern for complex real-world UI layouts.
<div class="flex flex-col min-h-screen">
<header class="flex items-center justify-between px-8 py-4 bg-white border-b">
<span class="font-bold">Logo</span>
<nav class="flex gap-4">
<a href="#" class="text-sm">Home</a>
</nav>
</header>
<main class="flex-1 flex items-center justify-center">
<p class="text-gray-600">Main content</p>
</main>
<footer class="bg-gray-800 text-white text-center py-6">
Footer
</footer>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: flex creates a flex container where children become flex items, flex-row and flex-col set the main axis direction, and flex items-center justify-center achieves perfect centering without knowing dimensions. Next up we position children along the main and cross axes with justify and items utilities.
자주 묻는 질문
“Flex와 방향 활성화” 강의는 무료인가요?
네 — “Flex와 방향 활성화” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Flex와 방향 활성화”에서 뭘 배우나요?
flex로 플렉스박스를 활성화하고, flex-row와 flex-col로 행 또는 열 레이아웃을 선택하며, 플렉스 컨테이너 모델을 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“Flex와 방향 활성화” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Flex와 방향 활성화
- 콘텐츠 배치와 항목 정렬
- Flex 확장, 축소 및 기준 크기
- 줄 바꿈과 간격