Flex'i ve Yönü Etkinleştirme
flex ile flexbox'ı etkinleştirin, flex-row ve flex-col ile satır veya sütun düzenini seçin ve flex kapsayıcı modelini anlayın.
Flex'i ve Yönü Etkinleştirme, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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.
Sıkça Sorulan Sorular
“Flex'i ve Yönü Etkinleştirme” dersi ücretsiz mi?
Evet — “Flex'i ve Yönü Etkinleştirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Flex'i ve Yönü Etkinleştirme” dersinde ne öğreneceğim?
flex ile flexbox'ı etkinleştirin, flex-row ve flex-col ile satır veya sütun düzenini seçin ve flex kapsayıcı modelini anlayın. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Flex'i ve Yönü Etkinleştirme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Flex'i ve Yönü Etkinleştirme
- İçeriği Gerekçelendirme ve Öğeleri Hizalama
- Flex Büyümesi, Küçülmesi ve Temeli
- Satıra Sığdırma ve Boşluk