启用 Flex 与设置方向
使用 flex 启用 Flexbox，使用 flex-row 和 flex-col 选择行或列布局，并理解 Flex 容器模型。
启用 Flex 与设置方向 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 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 与设置方向」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「启用 Flex 与设置方向」这节课中我会学到什么？
使用 flex 启用 Flexbox，使用 flex-row 和 flex-col 选择行或列布局，并理解 Flex 容器模型。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「启用 Flex 与设置方向」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 启用 Flex 与设置方向
- 内容分布与项目对齐
- Flex 增长、收缩与基准尺寸
- 换行与间距