Tailwind CSS Flexbox Sınıfları: Yön, Sarma, Hizalama ve gap

flex ve inline-flex: kapsayıcıyı açmak

Flexbox'ın tüm diğer sınıfları ancak üst öğe bir flex kapsayıcısıysa anlam kazanır. Bunu sağlayan iki sınıf var: flex öğeye display: flex, inline-flex ise display: inline-flex verir. İlki kutuyu blok düzeyinde bırakır, yani satırın tamamını kaplar ve kendinden sonraki içeriği alt satıra iter. İkincisi kutuyu metin akışı içinde satır içi bir öğe gibi davrandırır; içindeki öğeler yine flexbox kurallarıyla dizilir. Simgeli bir butonu metnin ortasında tutmak ya da bir rozetin içinde simge ile yazıyı yan yana hizalamak inline-flex için tipik kullanım alanlarıdır.

Bir noktaya dikkat edin: flex sınıfı yalnızca doğrudan çocukları flex öğesine çevirir. Torunlar etkilenmez; iç içe bir düzen kuracaksanız iç kutuya da ayrıca flex vermeniz gerekir. Aşağıdaki gezinme çubuğu örneğinde bunu göreceksiniz: dış nav ve içteki bağlantı grubu ayrı ayrı flex kapsayıcısıdır.

Yön: flex-row, flex-col ve ters yönler

Flex kapsayıcısının ana ekseni varsayılan olarak yataydır. Tailwind bunu açıkça yazmak için flex-row (flex-direction: row), dikeye çevirmek için flex-col (flex-direction: column) sınıflarını sunar. flex-row-reverse ve flex-col-reverse ise aynı eksende sırayı tersine çevirir. Ters yön sınıfları HTML'deki sırayı değiştirmez; yalnızca öğelerin ekranda dizilme yönünü değiştirir. Bu yüzden içerik sırası anlam taşıyorsa (adım adım talimatlar gibi) görsel sırayı ters çevirmek yerine HTML'yi doğru sırayla yazmak daha sağlıklıdır.

Yön sınıfının en önemli yan etkisi şudur: ana eksen dönünce justify-* ve items-* sınıflarının etkilediği yön de döner. flex-row içinde justify-center öğeleri yatayda ortalarken, flex-col içinde aynı sınıf dikeyde ortalar. Pek çok "ortalama çalışmıyor" şikâyeti bu eksen değişiminin gözden kaçmasından doğar.

Yön sınıfları en çok responsive düzenlerde işe yarar. Tailwind mobil öncelikli çalıştığı için önek almayan sınıf tüm ekranlarda geçerlidir, md: önekli sınıf ise yalnızca orta boy ve üstü ekranlarda devreye girer. Aşağıdaki kart mobilde alt alta, geniş ekranda yan yana dizilir:

<div class="flex flex-col gap-4 md:flex-row md:items-center">
  <img src="kapak.jpg" alt="Kapak">
  <p>Kart metni</p>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .flex {
    display: flex;
  }
  .flex-col {
    flex-direction: column;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  @media (width >= 48rem) {
    .md\:flex-row {
      flex-direction: row;
    }
    .md\:items-center {
      align-items: center;
    }
  }
}

Çıktıda iki şey öğreticidir. Birincisi, md: önekli sınıflar @media (width >= 48rem) bloğu içinde üretilir; 48rem, kök yazı boyutu 16px iken 768px'e karşılık gelir. İkincisi, gap-4 sabit bir piksel değeri değil calc(var(--spacing) * 4) olarak yazılır. Varsayılan temada --spacing değişkeni 0.25rem olduğundan sonuç 1rem, yani 16px kök boyutunda 16px eder. Kırılma noktalarının ayrıntıları responsive tasarım yazısında anlatılıyor.

Sarma: flex-wrap, flex-nowrap, flex-wrap-reverse

Flex öğeleri varsayılan olarak tek satıra sığdırılmaya çalışılır. Resmî belge flex-nowrap için bu davranışı tarif eder: öğeler tek satırda kalır ve esnemeyen öğeler gerekirse kapsayıcının dışına taşar. Öğelerin yeni satırlara geçmesine izin vermek için flex-wrap (flex-wrap: wrap), satırların ters yönde dizilmesi için flex-wrap-reverse kullanılır. Etiket listeleri, filtre çipleri ve buton grupları gibi kaç öğe olacağını önceden bilmediğiniz yerlerde flex-wrap neredeyse her zaman gereklidir; yoksa dar ekranda yatay kaydırma çubuğu ile karşılaşırsınız.

<ul class="flex flex-wrap justify-center-safe gap-x-3 gap-y-2">
  <li>html</li>
  <li>css</li>
  <li>tailwind</li>
</ul>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .flex {
    display: flex;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .justify-center-safe {
    justify-content: safe center;
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
}

Burada sarılan satırlar arasında farklı, aynı satırdaki öğeler arasında farklı boşluk istediğimiz için gap-x-3 (column-gap) ve gap-y-2 (row-gap) ayrı ayrı verildi. justify-center-safe sınıfını ise bir sonraki bölümde açıklıyoruz.

Ana eksende dağılım: justify-* sınıfları

justify-* sınıfları justify-content özelliğini yazar ve öğelerin ana eksen boyunca nasıl yerleşeceğini, artan boşluğun nereye dağıtılacağını belirler. v4.3.5'in ürettiği değerler şöyle:

Üç dağıtım sınıfı sık karıştırılır. justify-between ilk öğeyi başa, son öğeyi sona yapıştırır ve aradaki boşlukları eşitler; gezinme çubuğunda logoyu sola, menüyü sağa atmak için en çok kullanılan sınıf budur. justify-around her öğenin iki yanına eşit boşluk koyar; bu yüzden iki öğe arasındaki boşluk, kenardaki boşluğun iki katı olur. justify-evenly ise kenarlar dahil bütün boşlukları eşit tutar. Resmî belge de bu farkı vurgular: evenly ile öğeler arasındaki boşluk, kenarlara göre iki katına çıkmaz.

Güvenli hizalama (safe): justify-center ile ortalanan öğeler kapsayıcıdan geniş olursa iki yana birden taşar; sol taraftaki taşma kaydırılarak bile görülemeyebilir. Resmî belgeye göre justify-center-safe ve justify-end-safe, yeterli yer olmadığında öğeleri başlangıca yaslayarak bu sorunu önler. Yukarıdaki etiket listesinde bu yüzden justify-center-safe seçtik: geniş ekranda etiketler ortada durur, sığmadıkları durumda baştan dizilir.

justify-normal, belgeye göre öğeleri hiçbir justify-content değeri verilmemiş gibi varsayılan konumlarına yerleştirir. Bunu genellikle responsive bir düzende önceki bir sınıfı geri almak için kullanırsınız; örneğin justify-center md:justify-normal. justify-stretch için belgedeki örnek bir grid kapsayıcısıdır; flexbox düzeninde bu sınıfa nadiren ihtiyaç duyarsınız.

Çapraz eksende hiza: items-* sınıfları

items-* sınıfları align-items özelliğini yazar ve öğelerin çapraz eksende (yatay flex'te dikey yönde) nasıl hizalanacağını belirler:

items-stretch öğeleri çapraz eksen boyunca kapsayıcıyı dolduracak şekilde uzatır; yan yana kartların aynı yükseklikte görünmesini isteyen düzenlerde işinize yarar. items-center ise ikon ile metni dikeyde aynı hizaya getirmenin en kısa yoludur. items-baseline farklı yazı boyutlarına ya da farklı iç boşluklara sahip öğelerin metin taban çizgilerini aynı hizaya getirir; resmî belgedeki örnekte üç öğenin dikey padding değerleri farklı olduğu halde metinler aynı çizgiye oturur. items-baseline-last ise belgeye göre öğeleri kapsayıcıdaki son taban çizgisine göre hizalar ve yükseklikleri farklı metin bloklarını hizalamakta işe yarar.

Tek bir öğenin bu hizadan çıkmasını istiyorsanız kapsayıcıyı değiştirmeyin; öğeye self-* sınıfı verin. Bu, flex öğesi sınıfları yazısında örnekle anlatılıyor.

Boşluk: gap, gap-x ve gap-y

Flex öğeleri arasına boşluk koymanın Tailwind'deki doğal yolu gap-* sınıflarıdır. gap-4 iki eksende de boşluk verir; gap-x-* yalnızca column-gap, gap-y-* yalnızca row-gap yazar. Değerler boşluk ölçeğinden gelir: sayı, --spacing değişkeniyle çarpılır. v4.3.5 ile yaptığımız denemede gap-0.5 ve gap-2.5 gibi çeyreklik adımlar üretildi, gap-3.3 ise hiç CSS üretmedi. Tam olarak istediğiniz bir değer varsa köşeli parantezle yazabilirsiniz: gap-[13px] doğrudan gap: 13px üretir. gap-px ise gap: 1px verir.

gap'in kenar boşluğuna (margin) göre avantajı, yalnızca öğelerin arasına boşluk koymasıdır; ilk öğenin önüne ya da son öğenin arkasına fazladan boşluk eklemez ve sarılan satırlar arasında da çalışır. space-x-* ile farkları ve hangi durumda hangisini seçeceğiniz gap, space ve divide yazısında ayrıntılı olarak karşılaştırılıyor.

Uygulamalı örnek: gezinme çubuğu

Şimdi öğrendiklerimizi bir araya getirelim. Sol tarafta logo, sağ tarafta bir bağlantı grubu olan klasik bir üst menü kuruyoruz:

<nav class="flex items-center justify-between gap-4">
  <a href="#">Logo</a>
  <div class="flex gap-6">
    <a href="#urunler">Ürünler</a>
    <a href="#iletisim">İletişim</a>
  </div>
</nav>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .flex {
    display: flex;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
}

Dış nav iki çocuğa sahip: logo bağlantısı ve bağlantı grubu. justify-between bu ikisini iki uca yaslar, items-center logonun ve bağlantıların dikeyde aynı hizada durmasını sağlar. Dış kapsayıcıdaki gap-4 ilk bakışta gereksiz görünebilir, ama dar ekranda iki grup birbirine yaklaştığında aralarında en az 1rem boşluk kalmasını garantiler. İç div ayrı bir flex kapsayıcısıdır ve bağlantıları gap-6 ile, yani 16px kök boyutunda 24px arayla dizer. Dikkat ederseniz .flex kuralı CSS'te yalnızca bir kez üretildi: aynı sınıfı on yerde kullanmanız çıktıyı büyütmez.

Sık yapılan hatalar

• Kapsayıcıya flex vermeyi unutmak. items-center ya da justify-between bir CSS kuralı üretir ama üst öğe flex veya grid değilse tarayıcı bu özellikleri yok sayar. Önce flex sınıfının gerçekten aynı öğede olduğunu kontrol edin.
• Sınıfı yanlış öğeye koymak. justify-* ve items-* kapsayıcıya, self-* ve grow gibi sınıflar öğeye verilir. Çocuğa justify-center yazıp çocuğun ortalanmasını beklemek işe yaramaz.
• Eksen değişimini unutmak. flex-col eklediğiniz anda yatay ortalama için items-center, dikey dağılım için justify-* kullanmanız gerekir.
• Var olmayan sınıf adı uydurmak. Tailwind tanımadığı bir adı sessizce atlar. v4.3.5 ile denediğimiz flex-col-wrap hiçbir CSS üretmedi; doğru yazım flex-col flex-wrap şeklinde iki ayrı sınıftır.
• Sınıf adını değişkenle birleştirmek. justify-${yon} gibi parçalı yazılan adlar kaynak taramasında bulunamaz ve CSS'e girmez. Nedenini ve çözümünü sınıf tarama ve @source yazısında bulabilirsiniz.
• Flex'te justify-items aramak. justify-items-* sınıfları resmî belgede grid öğeleri için anlatılır; flex'te ana eksen dağılımı justify-* ile yapılır. Grid hizalaması hizalama yazısında ele alınıyor.

Flexbox mı, grid mi?

Kaba bir kural olarak, içeriğin kendi boyutuna göre tek bir eksende dizildiği yerlerde (menüler, buton grupları, ikon ile metin, etiket listeleri) flexbox; satır ve sütunların birlikte hizalanması gereken yerlerde (kart ızgaraları, sayfa iskeletleri, panolar) grid daha kısa ve öngörülebilir sınıflarla sonuca ulaşır. İki yaklaşım birbirinin rakibi değildir; bir sayfa iskeleti grid ile kurulup her kartın içi flexbox ile düzenlenebilir. Grid tarafı grid-cols ve grid-rows yazısında anlatılıyor.

Sık Sorulan Sorular

Tailwind'de flex-row yazmak zorunlu mu?

Hayır. Flex kapsayıcısının varsayılan yönü zaten satırdır. flex-row çoğunlukla responsive bir düzende önceki flex-col sınıfını geri almak için kullanılır, örneğin flex-col md:flex-row.

justify-center ile items-center arasındaki fark nedir?

justify-center ana eksende (justify-content), items-center çapraz eksende (align-items) ortalar. Yatay bir flex kapsayıcısında birincisi yatay, ikincisi dikey ortalama yapar; flex-col ile bu roller yer değiştirir. İkisini birlikte kullanmak bir öğeyi tam ortaya almanın yollarından biridir; diğer yöntemler div ortalama yazısında karşılaştırılıyor.

gap-4 kaç piksel?

gap-4 calc(var(--spacing) * 4) üretir. Varsayılan --spacing 0.25rem olduğu için sonuç 1rem'dir; kök yazı boyutu 16px ise 16px eder. Kök boyutunu değiştirirseniz piksel karşılığı da değişir.

-safe sınıfları ne zaman kullanılmalı?

Ortalanan ya da sona yaslanan öğelerin kapsayıcıdan geniş olabileceği durumlarda. Resmî belgeye göre justify-center-safe ve justify-end-safe yer yetmediğinde öğeleri başlangıca yaslar, böylece içerik görünmeyen tarafa taşmaz.

Flex düzenini ekran boyutuna göre nasıl değiştiririm?

Her flex sınıfının önüne bir kırılma noktası öneki ekleyebilirsiniz. Resmî belgelerdeki örnekler bunu gösterir: justify-start md:justify-between küçük ekranda öğeleri başa toplar, orta boy ve üstünde iki uca dağıtır; flex-wrap md:flex-wrap-reverse sarma yönünü değiştirir; items-stretch md:items-center çapraz eksen hizasını değiştirir. Önek almayan sınıf tüm ekranlar için temel değerdir, önekli sınıf yalnızca o genişlikten itibaren onu ezer.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Tailwind CSS öğrenme rehberi · flex-1, grow, shrink ve basis · Tailwind grid sınıfları · Tailwind ile div ortalama · CSS flexbox rehberi · Tailwind CSS sıfırdan rehber