CSS flex-grow, flex-shrink ve flex-basis: Alan Dağıtımı ve flex Kısaltması

Temel kavram: pozitif ve negatif boş alan

Flex boyutlandırması, öğelerin doğal boyutları ile kapsayıcının ana eksendeki boyutu arasındaki farka dayanır. MDN bu farka boş alan (free space) der. Örneğin 500 piksel genişliğinde, flex-direction: row olan bir kapsayıcıda 100'er piksellik üç öğe varsa öğeler 300 piksel kaplar ve geriye 200 piksel pozitif boş alan kalır. Aynı kapsayıcıdaki öğeler 200'er piksel olsaydı toplam 600 piksel gerekirdi; bu durumda 100 piksellik negatif boş alan oluşur.

• Pozitif boş alan varsa flex-grow devreye girer ve alan büyüyebilen öğelere dağıtılır.
• Negatif boş alan varsa flex-shrink devreye girer ve eksik alan küçülebilen öğelerden kesilir.
• Boş alan sıfırsa hiçbir öğe büyümez ya da küçülmez.

Sütun yönünde aynı mantık yükseklikler için işler: ana eksen artık dikey olduğundan öğelerin yükseklikleri toplanır ve kapsayıcının yüksekliğiyle karşılaştırılır.

flex-basis: büyümeden önceki boyut

flex-basis, boş alan dağıtılmadan önce öğenin ana eksende sahip olduğu başlangıç boyutudur. Başlangıç değeri autodur. MDN'e göre auto şöyle çözülür: öğenin ana eksen boyutu (yatay yazımda width) tanımlıysa o değer kullanılır; öğe width: 200px taşıyorsa flex-basis 200 piksel olur. Boyut da auto ise content değeri kullanılır, yani öğe içeriğinin boyutu temel alınır; bu da pratikte içeriğin max-content boyutudur.

• Uzunluk: flex-basis: 200px ya da 10em doğrudan başlangıç boyutunu verir.
• Yüzde: Flex kapsayıcının iç ana boyutuna göre çözülür. Kapsayıcının boyutu belirsizse kullanılan değer content olur.
• content: Öğeye width verilmiş olsa bile içerik boyutunu kullanır.
• 0: Öğenin kendi boyutu alan paylaşımında hesaba katılmaz; tüm alan büyüme oranlarına göre dağıtılır.
• min-content, max-content, fit-content: İçsel boyut anahtar sözcükleri de geçerlidir.

Önemli bir öncelik kuralı vardır: flex-basis değeri auto dışında bir şeyse ve aynı öğede width (sütun yönünde height) da tanımlıysa flex-basis kazanır. Ayrıca flex-basis varsayılan olarak içerik kutusunun boyutunu belirler; box-sizing değiştirildiyse ona göre davranır. Bu ayrım için box-sizing yazısına bakabilirsiniz.

flex-grow: pozitif boş alanı paylaştırmak

flex-grow bir büyüme katsayısıdır ve negatif olmayan bir sayı alır; başlangıç değeri 0dır, yani öğeler varsayılan olarak büyümez. Değerin kendisi değil, kardeş öğelerin değerleri arasındaki oran önemlidir. Tüm öğelere 1 vermek ile 88 vermek aynı sonucu doğurur. Hesap MDN'in tarif ettiği üç adımla yapılır:

• Büyüyebilen tüm kardeşlerin flex-grow değerleri toplanır.
• Pozitif boş alan bu toplama bölünerek bir paydaki piksel miktarı bulunur.
• Her öğe kendi katsayısı kadar pay alır ve bu miktar flex-basis değerine eklenir.

.kapsayici {
  display: flex;
  width: 700px;
}
.kapsayici > div { width: 100px; }   /* flex-basis: auto, yani 100px */
.a { flex-grow: 0; }
.b { flex-grow: 1; }
.c { flex-grow: 2; }
.d { flex-grow: 3; }
/* hesap:
   doğal toplam   = 4 x 100px = 400px
   boş alan       = 700px - 400px = 300px
   katsayı toplamı = 0 + 1 + 2 + 3 = 6
   bir pay        = 300px / 6 = 50px
   sonuç: a = 100px, b = 150px, c = 200px, d = 250px */

Bu örnek MDN'in flex-grow sayfasındaki örnekle aynıdır. Sonuçta öğelerin genişlikleri 1:2:3 oranında değil; 100, 150, 200 ve 250 piksel olur. Çünkü oran yalnızca eklenen alana uygulanır, başlangıç boyutlarına uygulanmaz. Öğe boyutlarının doğrudan oranlı olmasını istiyorsanız başlangıç boyutunu sıfırlamanız gerekir; bunun için aşağıdaki flex: 1 bölümüne bakın.

flex-shrink: negatif boş alanı kesmek

flex-shrink bir küçülme katsayısıdır; başlangıç değeri 1dir ve negatif değerler geçersizdir. Öğelerin flex-basis toplamı kapsayıcıya sığmıyorsa, katsayısı pozitif olan öğeler küçülerek taşmayı önler. flex-shrink: 0 verilen öğe küçülmez; hepsine 0 verilirse öğeler kapsayıcıdan taşar.

Küçülme, büyümenin tam tersi değildir. MDN'e göre küçülme katsayısı, dağıtım yapılırken öğenin flex taban boyutuyla çarpılır. Böylece negatif alan, her öğenin ne kadar küçülebileceğiyle orantılı biçimde kesilir ve küçük bir öğe, büyük bir öğe belirgin şekilde küçülmeden sıfıra inmez.

.kapsayici {
  display: flex;
  width: 500px;
}
.kapsayici > div { width: 200px; }   /* kısa içerikli üç öğe */
.a { flex-shrink: 1; }
.b { flex-shrink: 1; }
.c { flex-shrink: 2; }
/* hesap:
   doğal toplam  = 3 x 200px = 600px, negatif alan = 100px
   ağırlıklar    = katsayı x taban boyutu
                 = 1 x 200 = 200, 1 x 200 = 200, 2 x 200 = 400 (toplam 800)
   kesilen miktar = a: 100 x 200/800 = 25px
                    b: 100 x 200/800 = 25px
                    c: 100 x 400/800 = 50px
   sonuç: a = 175px, b = 175px, c = 150px (toplam 500px) */

Taban boyutunun etkisini görmek için farklı genişliklerle bir örnek daha düşünelim: 400 piksellik bir kapsayıcıda biri 100, diğeri 400 piksel olan iki öğe var ve ikisinin de flex-shrink değeri 1. Negatif alan 100 pikseldir. Ağırlıklar 1 x 100 = 100 ve 1 x 400 = 400, toplamı 500'dür. Küçük öğeden 100 x 100/500 = 20 piksel, büyük öğeden 100 x 400/500 = 80 piksel kesilir; sonuç 80 ve 320 pikseldir. Katsayılar eşit olduğu halde büyük öğe dört kat fazla küçülür.

Öğe neden daha fazla küçülmüyor? min-content tabanı

Yukarıdaki hesaplar öğelerin içeriği kısa olduğunda geçerlidir. MDN, bir öğenin min-content boyutunun altına küçülmeyeceğini vurgular; bu, tüm yumuşak satır kırma fırsatları kullanıldığında öğenin olabileceği en küçük boyuttur, kabaca en uzun kelimenin genişliğidir. Hesaplanan kesinti bir öğeyi bu sınırın altına itecekse o öğe sınırda kalır ve kalan negatif alan diğer öğelerden kesilir. Bu yüzden MDN, flex-shrink'in flex-grow'a göre daha az tutarlı görünebileceğini söyler.

Bu davranışın kaynağı min-width özelliğinin başlangıç değeri olan autodur. MDN'e göre flex ve grid öğelerinde auto, normal kutulardaki gibi 0'a çözülmez; belirtilmiş bir boyut, en-boy oranından aktarılan bir boyut ya da bunlar yoksa min-content boyutu kullanılır. Öğe bir kaydırma kapsayıcısıysa (örneğin overflow: hidden ya da overflow: auto verilmişse) otomatik en küçük boyut 0 olur. Uzun bir URL ya da bölünmeyen bir kelime yüzünden bir flex öğesi küçülmeyi reddediyorsa öğeye min-width: 0 vermek bu tabanı kaldırır.

.satir {
  display: flex;
}
.satir .metin {
  flex: 1;
  min-width: 0;   /* otomatik min-content tabanını kaldırır */
}
/* sonuç: .metin artık en uzun kelimesinden daha dar olabilir;
   taşan içeriği yönetmek için overflow ya da overflow-wrap gerekir */

Taşan metnin nasıl kırılacağı ya da kesileceği metin kaydırma ve overflow yazılarında anlatılıyor.

flex kısaltması: bir, iki ve üç değerli yazım

MDN, üç alt özelliği tek tek yazmak yerine flex kısaltmasını önerir; çünkü anahtar sözcük değerleri güvenilir birleşimlere açılır. Kısaltmanın sırası flex-grow, flex-shrink, flex-basis şeklindedir. Yazmadığınız değerler alt özelliklerin başlangıç değerleri değil, kısaltmanın kendi varsayılanlarıdır: grow ve shrink için 1, basis için 0%.

Bir, iki ve üç değerli kuralları şöyle özetleyebiliriz. Tek değer geçerli bir flex-grow sayısıysa kısaltma <sayı> 1 0% olarak açılır; geçerli bir flex-basis değeriyse 1 1 <değer> olur. İki değerde ilk değer her zaman flex-grow'dur; ikincisi sayıysa flex-shrink, uzunluk ya da yüzdeyse flex-basis kabul edilir. Üç değerde sıra sabittir. Negatif grow ya da shrink değerleri geçersizdir.

flex: 1 ile flex: auto arasındaki fark

Bu iki değer en sık karıştırılan ikilidir ve aralarındaki tek fark flex-basis'tir. flex: auto öğenin kendi boyutundan (genişlik verilmemişse içerik boyutundan) başlar ve kalan alanı eşit paylaştırır. flex: 1 ise başlangıç boyutunu sıfır kabul eder ve kapsayıcının tüm alanını büyüme oranına göre böler.

.sekmeler {
  display: flex;
  width: 600px;
}
/* içerik genişlikleri 50px, 100px ve 150px olsun */

.sekmeler.auto > * { flex: auto; }   /* 1 1 auto */
/* temel toplam = 300px, boş alan = 300px, her öğeye 100px
   sonuç: 150px, 200px, 250px; uzun içerikli sekme yine en geniş */

.sekmeler.bir > * { flex: 1; }       /* 1 1 0% */
/* temel toplam = 0, boş alan = 600px, her öğeye 200px
   sonuç: 200px, 200px, 200px; tüm sekmeler eşit */

MDN'in kullanım örnekleri rehberi gezinme menüsü için tam bu karşılaştırmayı yapar: flex: auto öğelerin doğal boyutlarına saygı gösterip boş alanı eşit paylaştırır, flex: 1 ise bütün öğeleri aynı genişliğe getirir. Eşit genişliğin bir koşulu vardır: hiçbir öğenin min-content boyutu payına düşen 200 pikselden büyük olmamalıdır; aksi halde o öğe tabanında kalır. Farklı oranlar istiyorsanız basis'i sıfırda tutup grow değerlerini değiştirirsiniz: flex: 1, flex: 1 ve flex: 2 verilen üç öğede katsayı toplamı 4 olduğu için alan 1:1:2 oranında dağılır ve üçüncü öğe diğerlerinin iki katı genişlikte olur.

Gerçek desenler

Kartın alt bilgisini en alta itmek

Kartlar bir grid ya da flex düzeninde aynı yüksekliğe uzasa bile, kartın içi normal blok akışında kalır; içeriği kısa olan kartta alt bilgi hemen metnin altına çıkar. MDN'in çözümü kartı sütun yönlü bir flex kapsayıcı yapmak ve içerik alanına flex: 1 vermektir. Büyüyebilen tek öğe içerik olduğu için bütün boş alanı o alır ve alt bilgiyi kartın dibine iter.

.kart {
  display: flex;
  flex-direction: column;
}
.kart .icerik {
  flex: 1;          /* kalan dikey alanın tamamını alır */
}
/* sonuç: .alt-bilgi her kartta en altta durur */

Büyüyen form alanı

Bir arama formunda etiket ve buton içerikleri kadar kalırken metin kutusunun kalan alanı doldurması istenir. Etiket ve buton başlangıç değerleriyle bırakılır (büyümez, küçülebilir), metin kutusuna ise büyüme izni verilir.

.arama {
  display: flex;
}
.arama input {
  flex: 1 1 auto;   /* kalan alanı doldurur, dar ekranda küçülür */
}

Medya nesnesi

Görsel ile açıklamanın yan yana durduğu medya nesnesinde görsel tarafı başlangıç değerlerini kullanır ve büyümez; ona verilen width ya da max-width doğrudan flex-basis olur. Metin tarafına flex: 1 verildiğinde kalan alanı doldurur. İki tarafı da flex: 1 yaparsanız iki eşit sütun elde edersiniz; görsele flex: 1, metne flex: 3 verirseniz alan 1:3 oranında bölünür.

Sık yapılan hatalar

• flex-grow oranını genişlik oranı sanmak: Oran yalnızca eklenen boş alana uygulanır. Doğrudan oranlı genişlik için basis sıfır olmalıdır (flex: 1, flex: 2).
• flex-basis ile width arasındaki önceliği unutmak: Basis auto değilse width başlangıç boyutu olarak kullanılmaz.
• Küçülmeyen öğede flex-shrink değerini artırmak: Sorun çoğu zaman katsayı değil, min-width: auto kaynaklı min-content tabanıdır; min-width: 0 deneyin.
• Alt özellikleri tek tek yazıp birini unutmak: MDN kısaltmayı önerir; flex: auto, initial, none ya da pozitif bir sayı çoğu ihtiyacı karşılar.
• flex özelliğini grid öğesinde kullanmak: flex kısaltmasının flexbox dışında etkisi yoktur; grid izlerini esnek yapmak için fr birimi kullanılır.

Sık Sorulan Sorular

flex: 1 tam olarak ne anlama gelir?

flex-grow: 1, flex-shrink: 1 ve flex-basis: 0% demektir. Öğe sıfır taban boyutundan başlar ve kardeşleriyle birlikte boş alanı büyüme oranına göre paylaşır; tüm öğeler flex: 1 taşıyorsa eşit genişlikte olurlar.

flex-grow ondalıklı olabilir mi?

Evet. flex-grow ve flex-shrink negatif olmayan herhangi bir sayı alır. MDN'in örneğinde 1, 1, 2 yerine .25, .25, .50 yazmak aynı sonucu verir, çünkü önemli olan orandır.

flex: none ne zaman kullanılır?

Bir öğenin boyutunun hiçbir koşulda değişmemesini istediğinizde, örneğin sabit genişlikli bir simge ya da avatar için. flex: none, 0 0 auto anlamına gelir; öğe ne büyür ne küçülür.

Yüzdelik flex-basis neye göre hesaplanır?

Flex kapsayıcının iç ana boyutuna göre. Kapsayıcının boyutu belirsizse MDN'e göre kullanılan değer content olur.

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: CSS öğrenme rehberi · CSS flexbox rehberi · Flexbox hizalama · box-sizing · minmax() ve auto-fit