Tailwind CSS ile Flexbox Dünyasına Giriş (Temeller)

Web tasarım dünyasında yıllarca süren "bir div'i dikeyde nasıl ortalarım?" çilesi sona erdi. Eskiden float ve position hesaplamalarıyla boğuşurken, bugün modern CSS'in süper gücü Flexbox (Esnek Kutu Modeli) imdadımıza yetişiyor. Tailwind CSS Flexbox sınıfları ise bu gücü, CSS dosyaları arasında kaybolmadan, doğrudan HTML üzerinde kullanmanızı sağlıyor.

Bu rehberde; Tailwind CSS kullanarak modern, duyarlı (responsive) ve esnek web arayüzleri oluşturmanın temellerini atacağız. Hazırsanız, web tasarımın Lego parçalarıyla oynamaya başlayalım.

1. Flexbox Dünyasına Giriş: flex Sınıfı

Bir alanı (div, section, nav vb.) Flexbox mimarisine dahil etmek için yapmanız gereken tek şey, kapsayıcı elemana (parent) flex sınıfını vermektir.

Normalde HTML elementleri (div'ler) block seviyesindedir ve alt alta dizilirler. flex sınıfını eklediğiniz anda, tarayıcıya şu mesajı verirsiniz: "İçindeki elemanları yan yana diz ve benim kontrolüme bırak."

Örnek:

<div class="flex bg-slate-100 p-6 gap-4">
  <div class="bg-blue-600 text-white p-4 rounded shadow-md">Kutu 1</div>
  <div class="bg-blue-600 text-white p-4 rounded shadow-md">Kutu 2</div>
  <div class="bg-blue-600 text-white p-4 rounded shadow-md">Kutu 3</div>
</div>

Modern İpucu (Gap): Eskiden kutuların arasına boşluk koymak için margin kullanırdık. Tailwind'de ise gap-4 (veya gap-x, gap-y) sınıfı ile tüm kutuların arasına eşit ve akıllı boşluklar bırakabilirsiniz.

2. Akış Yönünü Belirleme: Flex Direction

Flexbox'ın en büyük avantajı, HTML yapısını değiştirmeden öğelerin diziliş yönünü değiştirebilmesidir. Tailwind CSS'de bu kontrolü sağlayan sınıflar şunlardır:

• flex-row (Varsayılan): Öğeleri soldan sağa, yatay bir çizgide dizer.
• flex-col: Öğeleri yukarıdan aşağıya, dikey bir sütunda dizer.
• flex-row-reverse: Sıralamayı sağdan sola (tersten) yapar.
• flex-col-reverse: Sıralamayı aşağıdan yukarıya yapar.

Nerede Kullanılır? (Responsive Tasarım)

Özellikle mobil uyumlu menüler yaparken hayat kurtarır. Mobilde alt alta (flex-col), masaüstünde yan yana (md:flex-row) görünen bir yapı kurmak çocuk oyuncağıdır.

<div class="flex flex-col md:flex-row gap-4">
  <div class="bg-red-500 p-4 text-white">Ana Sayfa</div>
  <div class="bg-red-500 p-4 text-white">Hakkımızda</div>
  <div class="bg-red-500 p-4 text-white">İletişim</div>
</div>

3. Yatay Hizalama (Ana Eksen): justify-*

Öğelerimiz yan yana dizildiğinde (flex-row), yatay eksende nasıl davranacaklarını Justify Content sınıfları belirler. "Bu kutular sola mı yaslansın, ortada mı dursun yoksa sayfaya mı yayılsın?" sorusunun cevabı buradadır.

En sık kullanılan Tailwind justify sınıfları:

justify-start: Sola yasla (Varsayılan).

justify-center: Öğeleri tam ortaya toplar.

justify-end: Sağa yasla.

justify-between: İlk öğeyi en başa, son öğeyi en sona atar; diğerlerini eşit aralıklarla dizer. (Navbar tasarımlarının vazgeçilmezidir).

justify-around: Öğelerin sağına ve soluna eşit boşluk bırakır.

Örnek (Navbar Mantığı):

<nav class="flex justify-between items-center bg-slate-800 text-white p-4">
  <div class="font-bold text-xl">Logo</div>
  <ul class="flex gap-4">
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</nav>

Bu kodda Logo en sola, menü linkleri ise en sağa otomatik olarak itilir.

4. Dikey Hizalama (Çapraz Eksen): items-*

Flexbox kullanırken en çok karıştırılan nokta burasıdır. Eğer flex-row (yan yana) kullanıyorsanız, items-* sınıfları öğelerin dikeydeki (yukarı-aşağı) konumunu belirler.

• items-stretch (Varsayılan): Öğeler, kapsayıcının yüksekliği kadar uzar.
• items-center: Dikey olarak tam ortalar. Bir ikonu ve yanındaki yazıyı hizalamak için en iyi yöntemdir.
• items-start: Kapsayıcının tavanına yaslar.
• items-end: Kapsayıcının tabanına yaslar.

Örnek (Kullanıcı Kartı):

HTML

<div class="flex items-center gap-3 border p-4 rounded-lg">
  <img src="avatar.jpg" class="w-12 h-12 rounded-full object-cover">
  <div>
    <h3 class="font-bold">Sadık Turan</h3>
    <p class="text-gray-500 text-sm">Yazılım Eğitmeni</p>
  </div>
</div>

Burada items-center sayesinde resim ne kadar büyük olursa olsun, yanındaki yazılar dikey eksende resimle tam ortalı duracaktır.

5. Satıra Sığmayanları Yönetmek: flex-wrap

Responsive tasarımlarda ekran küçüldüğünde yan yana dizili kutuların sıkışmasını istemeyiz. Tailwind CSS flex-wrap sınıfları ile taşan elemanların alt satıra geçmesini sağlayabiliriz.

• flex-nowrap (Varsayılan): Ne olursa olsun tek satıra sığdırmaya çalışır, gerekirse taşar.
• flex-wrap: Sığmayan öğe otomatik olarak bir alt satıra geçer.

Örnek (Ürün Listesi / Grid Yapısı):

HTML

<div class="flex flex-wrap gap-4">
  <div class="w-full md:w-1/3 bg-white border p-4">Ürün 1</div>
  <div class="w-full md:w-1/3 bg-white border p-4">Ürün 2</div>
  <div class="w-full md:w-1/3 bg-white border p-4">Ürün 3</div>
  <div class="w-full md:w-1/3 bg-white border p-4">Ürün 4 (Alt satıra geçer)</div>
</div>

Özet Tablo: Hangi Sınıf Ne İşe Yarıyor?

Öğrendiklerimizi hızlıca hatırlamak için aşağıdaki tabloyu referans alabilirsiniz: