Flexと方向の有効化
flexでフレックスボックスを有効にし、flex-rowとflex-colで行または列のレイアウトを選び、フレックスコンテナのモデルを理解します。
「Flexと方向の有効化」はCoddyKit上の無料Tailwind CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。
「Flexと方向の有効化」で何を学びますか？
flexでフレックスボックスを有効にし、flex-rowとflex-colで行または列のレイアウトを選び、フレックスコンテナのモデルを理解します。 ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Tailwind CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Flexと方向の有効化」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTailwind CSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Flexと方向の有効化
- コンテンツの正当化と項目の配置
- Flexの伸長、縮小、基準サイズ
- 折り返しとギャップ