Tailwind CSS Flex Öğeleri: flex-1, grow, shrink-0, basis, order ve self

flex kısaltmaları: flex-1, flex-auto, flex-initial, flex-none

flex-* sınıfları CSS'teki flex kısaltmasını yazar. v4.3.5'in ürettiği değerler ve resmî belgedeki tarifleri:

Burada önemli bir not var: kullandığımız Tailwind skill'indeki tablo flex-1 için "1 1 0%" yazıyor, oysa v4.3.5 CLI'ın gerçekte ürettiği kural flex: 1. Tek sayılık flex kısaltması CSS'te büyüme katsayısını belirler ve temel boyutu sıfır kabul eder; yani iki yazım aynı amaca hizmet eder, ama çıktıyı okurken gördüğünüz şey flex: 1 olacaktır.

flex-1 ile flex-auto arasındaki fark pratikte şuna çıkar: flex-1 verilmiş öğeler içeriklerinin genişliğinden bağımsız olarak boş alanı eşit paylaşır. flex-auto verilmiş öğeler ise önce içerik genişliklerini alır, kalan alanı sonra paylaşır; bu yüzden uzun içerikli öğe daha geniş kalır. Eşit sütunlar istiyorsanız flex-1, içeriğe saygı gösteren bir esneklik istiyorsanız flex-auto seçin. flex-none ise logo, avatar ya da sabit genişlikli kenar çubuğu gibi boyutu hiç değişmemesi gereken öğeler içindir.

Başlangıç genişliği ne zaman önemli?

Resmî belgenin örneklerinde aynı kalıp tekrar eder: farklı genişlik sınıfları (w-14, w-64, w-32) verilmiş öğelerin davranışı, flex kısaltmasına göre değişir. Biz de üç öğeye farklı kısaltmalar verip derledik:

<div class="flex">
  <div class="w-14 flex-none">01</div>
  <div class="w-64 flex-1">02</div>
  <div class="w-32 flex-auto">03</div>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .flex {
    display: flex;
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-auto {
    flex: auto;
  }
  .flex-none {
    flex: none;
  }
}

CSS çıktısı yalnızca bildirimleri gösterir; davranışı belgedeki tariften okuruz. 01 numaralı öğe flex-none ile 3.5rem genişliğinde sabit kalır. 02, flex-1 aldığı için belgeye göre başlangıç boyutunu yok sayar: w-64 yazmış olmanız onun ne kadar alan alacağını belirlemez. 03 ise flex-auto ile w-32 genişliğini başlangıç noktası kabul eder ve kalan alanı ondan sonra paylaşır. Bu fark, bir öğeye genişlik verdiğiniz halde "genişlik neden işe yaramıyor" diye şaşırmanızın en sık nedenidir: flex-1 verdiyseniz genişlik sınıfı esneme hesabına girmez.

Kısaltmalar responsive önekleriyle de birleşir. Belgedeki flex-none md:flex-1 örneği, öğenin küçük ekranda sabit kalmasını, orta boy ve üstünde kalan alanı doldurmasını sağlar. Keyfi değer gerektiğinde flex-[3_1_auto] yazabilirsiniz; v4.3.5 bunu flex: 3 1 auto olarak derledi. Bir CSS değişkeninden okumak için flex-(--my-flex) kullanılır ve flex: var(--my-flex) üretir; aynı parantezli sözdizimi grow-(...), shrink-(...), basis-(...) ve order-(...) için de belgelerde yer alır.

Uygulamalı örnek: sabit menü ve esnek içerik

Sol tarafta sabit genişlikte bir menü, sağ tarafta kalan tüm alanı kaplayan içerik bölümü kuralım:

<div class="flex">
  <aside class="w-64 flex-none">Menü</aside>
  <main class="min-w-0 flex-1">İçerik</main>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .flex {
    display: flex;
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .min-w-0 {
    min-width: 0px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-none {
    flex: none;
  }
}

w-64 genişliği calc(var(--spacing) * 64) olarak yazılır; --spacing 0.25rem olduğundan 16rem eder, 16px kökte 256px. flex-none sayesinde menü dar ekranda ezilmez, geniş ekranda da büyümez. main öğesindeki flex-1 kalan alanın tamamını alır.

min-w-0 neden orada? Flex öğelerinin CSS'teki varsayılan en küçük genişliği içeriklerinin kendisidir. İçerik bölümünde kırılmayan uzun bir adres, geniş bir tablo ya da kod bloğu varsa öğe bu değerin altına küçülemez ve sayfa yatay taşar. min-w-0 (min-width: 0px) bu alt sınırı kaldırır; böylece taşan içerik kendi kutusunun içinde kalır ve oradan kaydırılabilir ya da truncate ile kesilebilir. Metin kesme ayrıntıları truncate ve line-clamp yazısında anlatılıyor.

grow ve shrink: büyümeyi ve küçülmeyi ayrı ayarlamak

Kısaltmalar yetmediğinde iki özelliği ayrı ayrı yazarsınız. grow flex-grow: 1, grow-0 flex-grow: 0 üretir; grow-3 gibi bir sayı ise boş alanın oranlı paylaşılmasını sağlar. Resmî belgedeki örnekte grow-3, grow-7, grow-3 verilmiş üç öğeden ortadaki fazladan alanın yaklaşık 7/13'ünü, kenardakiler 3/13'ünü alır. Dikkat edin: oranlar öğelerin toplam genişliğine değil, yalnızca artan boş alana uygulanır.

Küçülme tarafında shrink flex-shrink: 1, shrink-0 flex-shrink: 0 üretir. En sık ihtiyaç duyulan sınıf shrink-0'dır: avatar, ikon ya da onay kutusu gibi küçük öğeler, yanlarındaki uzun metin yüzünden ezilmesin diye bu sınıfı alır.

<div class="flex items-start gap-4">
  <img class="size-12 shrink-0" src="avatar.png" alt="">
  <p class="grow">Uzun yorum metni</p>
  <button class="self-center">Yanıtla</button>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .flex {
    display: flex;
  }
  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .items-start {
    align-items: flex-start;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .self-center {
    align-self: center;
  }
}

Avatar 3rem karedir ve shrink-0 sayesinde metin ne kadar uzun olursa olsun daralmaz. Yorum paragrafı grow ile kalan alanı doldurur. Kapsayıcıdaki items-start avatarı ve metni üstten hizalar; uzun bir yorumda avatarın ortada sallanmaması için bu tercih edilir. Buton ise self-center ile bu kuralın dışına çıkıp dikeyde ortalanır.

Eski adlar: skill'deki tablolarda flex-grow ve flex-shrink-0 adları geçiyor. v4.3.5 bu adları hâlâ derliyor (flex-grow yine flex-grow: 1 üretiyor), ancak tailwindcss canonicalize komutu onları grow ve shrink-0 olarak düzeltiyor. Yeni kodda kanonik adları kullanın; v3'ten v4'e geçişteki ad değişiklikleri Tailwind v4 yenilikleri yazısında toplu olarak bulunuyor.

$ tailwindcss canonicalize flex-grow flex-shrink-0
grow
shrink-0

basis: başlangıç boyutunu belirlemek

basis-* sınıfları flex-basis yazar, yani öğenin büyüme ve küçülme hesaplanmadan önceki başlangıç boyutunu belirler. Resmî belge üç ölçek tanımlar. Boşluk ölçeğinde basis-64 calc(var(--spacing) * 64) üretir. Kesirlerde basis-1/3 calc(1 / 3 * 100%) verir. Kapsayıcı ölçeğinde basis-xs var(--container-xs) yazar; bu değişken varsayılan temada 20rem'dir. Bunlara ek olarak basis-full (100%), basis-auto ve keyfi değer basis-[30vw] da kullanılabilir.

basis ile w-* arasındaki fark sık sorulur. Genişlik sınıfı öğenin kesin genişliğini söyler; basis ise flex algoritmasına "buradan başla" der ve ardından grow ile shrink devreye girer. Yatay bir flex kapsayıcısında ikisi çoğu zaman benzer sonuç verir, ama flex-col içinde basis yüksekliği etkiler, çünkü artık ana eksen dikeydir. Responsive sütun oranları için basis daha esnek bir araçtır.

Kapsayıcı ölçeğini genişletmek de mümkündür. Resmî belgeye göre @theme içinde yeni bir --container-* değişkeni tanımladığınızda aynı adlı basis sınıfı kendiliğinden oluşur. Belgedeki örneği derledik:

@import "tailwindcss";

@theme {
  --container-4xs: 14rem;
}

Bu tanımla basis-4xs sınıfı flex-basis: var(--container-4xs) üretti ve değişken temaya --container-4xs: 14rem olarak eklendi. Aynı değişken kapsayıcı ölçeğini kullanan max-w-* gibi sınıflarda da işe yarar. Tema değişkenlerinin genel kuralları @theme direktifi yazısında anlatılıyor.

order: görsel sırayı değiştirmek

order-* sınıfları öğeleri HTML'deki sıralarından farklı bir sırada göstermenizi sağlar. order-1, order-3 gibi sayılar doğrudan order değerini yazar; order-first order: -9999, order-last order: 9999, order-none ise order: 0 üretir. Negatif değer için başa eksi koyarsınız: -order-1 order: calc(1 * -1) verir.

En tipik kullanım, mobilde ve masaüstünde farklı sıra gereken düzenlerdir. Aşağıda filtre paneli HTML'de önce geliyor, mobilde ürünlerin altına iniyor, orta boy ekranda tekrar sola geçiyor:

<div class="flex flex-col md:flex-row">
  <aside class="order-last md:order-first md:basis-1/4">Filtreler</aside>
  <section class="md:basis-3/4">Ürünler</section>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .order-last {
    order: 9999;
  }
  .flex {
    display: flex;
  }
  .flex-col {
    flex-direction: column;
  }
  @media (width >= 48rem) {
    .md\:order-first {
      order: -9999;
    }
    .md\:basis-1\/4 {
      flex-basis: calc(1 / 4 * 100%);
    }
    .md\:basis-3\/4 {
      flex-basis: calc(3 / 4 * 100%);
    }
    .md\:flex-row {
      flex-direction: row;
    }
  }
}

Çıktıda sınıfların CSS'teki sırası HTML'deki sıradan farklı: .order-last .flex'ten önce geliyor. Tailwind kuralları kendi iç sıralamasına göre yazar; bu, aynı özelliği yazan iki sınıf çakıştığında hangisinin kazanacağını belirleyen şeydir ve çakışan sınıflar yazısında ayrıntılı anlatılıyor. Ayrıca kesir sınıflarındaki eğik çizgi seçicide \/ olarak kaçışlanır. order yalnızca görsel sırayı değiştirir; HTML sırası aynı kalır. Okuma sırası önemliyse HTML'yi asıl sıraya göre yazmak ve order'ı küçük görsel düzeltmeler için kullanmak daha güvenlidir.

self: tek öğenin hizasını değiştirmek

Kapsayıcıdaki items-* tüm öğelerin çapraz eksen hizasını belirler; self-* ise tek bir öğe için bunu ezer. v4.3.5'te self-auto align-self: auto, self-start flex-start, self-center center, self-end flex-end, self-stretch stretch, self-baseline baseline üretir. Belgede ayrıca self-baseline-last, self-center-safe ve self-end-safe da yer alır. self-auto, belgeye göre öğeyi yeniden kapsayıcının align-items değerine bağlar; responsive düzende önceki bir self-* sınıfını geri almak için kullanılır.

Ana eksende tek bir öğeyi ayırmak için ise self sınıfı yoktur; flexbox'ta bunun yolu otomatik kenar boşluğudur. Örneğin gezinme çubuğunda son butonu sağa itmek için ona ms-auto (margin-inline-start: auto) verebilirsiniz. Kenar boşluğu sınıfları padding ve margin yazısında anlatılıyor.

Sık yapılan hatalar

• Uzun içerikli flex-1 öğesinin taşması. flex-1 tek başına taşmayı engellemez; içerik kırılmıyorsa öğeye min-w-0 ekleyin.
• İkonların ezilmesi. Metinle yan yana duran sabit boyutlu öğelere shrink-0 ya da flex-none verin.
• Sınıfı kapsayıcıya vermek. flex-1, grow, basis-*, order-* ve self-* öğe sınıflarıdır. Kapsayıcıya yazarsanız kapsayıcının kendisi, kendi üst öğesine göre esner.
• Öğenin flex kapsayıcısının torunu olması. Bu sınıflar yalnızca doğrudan çocuklarda etkilidir. Araya bir sarmalayıcı div girdiyse sınıfı o sarmalayıcıya taşıyın.
• grow oranlarını toplam genişlik sanmak. grow-3 ve grow-7 boş alanı paylaştırır; öğelerin içerik genişlikleri farklıysa sonuç 3'e 7 oranında olmaz. Kesin oran istiyorsanız basis-* kesirlerini ya da grid'i kullanın.

Sık Sorulan Sorular

flex-1 ile w-full aynı şey mi?

Hayır. w-full öğenin genişliğini kapsayıcının yüzde 100'ü yapar ve yanındaki öğeleri hesaba katmaz. flex-1 ise diğer öğelerin aldığı alandan sonra kalan boşluğu doldurur. Yan yana öğelerden birinin kalan alanı alması gerekiyorsa flex-1 doğru seçimdir.

flex-1 verdiğim öğede w-64 neden etkisiz?

Resmî belgeye göre flex-1 öğenin başlangıç boyutunu yok sayar; genişlik sınıfı esneme hesabına girmez. Genişliğin başlangıç noktası olarak kullanılmasını istiyorsanız flex-auto seçin; öğenin kesinlikle o genişlikte kalmasını istiyorsanız flex-none ile birlikte kullanın. En küçük ya da en büyük genişlik sınırı koymak için min-w-* ve max-w-* sınıfları da esneme sırasında geçerli kalır.

flex-grow ve flex-shrink-0 hâlâ çalışıyor mu?

v4.3.5 bu adları derliyor, ama canonicalize komutu onları grow ve shrink-0 olarak düzeltiyor. Yeni kodda kanonik adları tercih edin.

order kullanmak erişilebilirliği etkiler mi?

order yalnızca görsel sırayı değiştirir, HTML'deki sıra aynı kalır. Bu yüzden görsel sıra ile HTML sırası arasındaki farkı küçük tutmak ve anlamı olan sırayı HTML'de kurmak iyi bir alışkanlıktır. Erişilebilirlik konusu erişilebilirlik yazısında ayrıca ele alınıyor.

Bu sınıflar grid öğelerinde de çalışır mı?

order-* resmî belgeye göre hem flex hem grid öğelerinde kullanılır. flex-*, grow, shrink ve basis ise flex öğelerine özgüdür; grid'de öğe boyutu sütun şablonu ve col-span-* ile belirlenir (col-span yazısı).

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 · Tailwind flexbox sınıfları · width, height ve size sınıfları · Tailwind ile div ortalama · CSS flexbox rehberi