CSS Flexbox Rehberi: Flex Kapsayıcı, Eksenler, flex-wrap ve order

Flexbox neden "tek boyutlu" bir modeldir?

MDN flexbox'ı tek boyutlu bir yerleşim modeli olarak tanımlar. Bunun anlamı, flexbox'ın aynı anda yalnızca tek bir boyutla ilgilenmesidir: öğeleri ya bir satır ya da bir sütun olarak yerleştirir. İki boyutlu bir model olan CSS grid ise satırları ve sütunları birlikte kontrol eder. Öğeler birden fazla satıra kaysa bile flexbox her satırı kendi başına bir kapsayıcı gibi ele alır; bir satırdaki öğeler üstteki satırın öğeleriyle hizalanmaya çalışmaz.

Bu ayrım pratikte şunu söyler: bir menü çubuğu, bir buton grubu, bir form satırı ya da bir kartın içindeki dikey sıralama gibi tek doğrultulu düzenler flexbox'ın doğal alanıdır. Sütunların alt alta tam hizalanması gereken bir galeri ya da sayfa iskeleti ise genellikle CSS grid ile daha kolay kurulur. MDN, "küçük bileşenlerde flexbox, büyük düzenlerde grid" gibi kesin bir kural olmadığını da vurgular: küçük bir bileşen iki boyutlu, büyük bir düzen tek boyutlu olabilir.

Flex kapsayıcı nasıl oluşturulur?

Flexbox ile düzenlenen alana flex kapsayıcı denir. Bir öğeyi flex kapsayıcı yapmak için display özelliğine flex değerini vermeniz yeterlidir. Kapsayıcının kendisinin sayfada blok gibi mi yoksa satır içi gibi mi duracağını da seçebilirsiniz: flex (çok anahtarlı yazımda block flex) blok düzeyinde, inline-flex (ya da inline flex) satır içi düzeyde bir flex kapsayıcı üretir. Bu değerlerin genel mantığı display değerleri yazısında anlatılıyor.

<nav class="menu">
  <a href="#">Ana sayfa</a>
  <a href="#">Hizmetler</a>
  <a href="#">İletişim</a>
</nav>

.menu {
  display: flex;   /* .menu flex kapsayıcı, üç <a> flex öğesi olur */
}
/* sonuç: bağlantılar içerikleri kadar genişlikte, yan yana tek satırda dizilir */

Burada dikkat edilmesi gereken nokta, flex düzeninin yalnızca doğrudan çocuklara uygulanmasıdır. Bir flex öğesinin içindeki torunlar flex öğesi olmaz; onlar normal akışta kalır. Bir ara sarmalayıcının kutusunu ortadan kaldırıp çocuklarını bir üst düzeye çıkarmak isterseniz MDN display: contents değerini örnek gösterir. Ancak aynı sayfa bazı tarayıcıların bu değeri taşıyan öğeleri erişilebilirlik ağacından hatalı biçimde çıkardığı konusunda uyarır; bu yüzden anlamı olan öğelerde (liste, buton gibi) dikkatli kullanılmalıdır.

Ana eksen ve çapraz eksen

Flexbox'ta yapılan her şey iki eksene göre tanımlanır. Ana eksen (main axis) flex-direction ile belirlenir ve öğeler bu eksen boyunca dizilir. Çapraz eksen (cross axis) ana eksene diktir. flex-direction değeri row ya da row-reverse ise ana eksen satır içi yönde (yatay yazılan bir dilde soldan sağa ya da sağdan sola) uzanır, çapraz eksen ise yukarıdan aşağıya iner. Değer column ya da column-reverse olduğunda ana eksen blok yönüne, yani sayfanın yukarısından aşağısına döner; çapraz eksen de satır boyunca uzanmaya başlar.

Eksenleri anlamak, hizalama özelliklerinin neden "bazen yatay, bazen dikey" çalıştığını da açıklar. justify-content her zaman ana eksende, align-items her zaman çapraz eksende çalışır. Yönü column yaptığınızda bu iki özellik yer değiştirmiş gibi görünür, ama aslında değişen eksenlerdir. Bu konuyu flexbox hizalama yazısında örneklerle inceliyoruz.

Sol ve sağ yerine başlangıç ve bitiş

Flexbox belgenin yazma yönü hakkında varsayım yapmaz. İngilizce ya da Türkçe gibi soldan sağa yazılan bir dilde row değerinde ana eksenin başlangıç kenarı soldadır. Arapça gibi sağdan sola yazılan bir dilde ise aynı row değeri sağdan başlar. MDN'e göre row ve row-reverse değerleri kapsayıcının yönlülüğünden etkilenir: dir özniteliği rtl olduğunda row sağdan sola uzanır. Bu yüzden flexbox anlatılırken sol ve sağ yerine "başlangıç" ve "bitiş" sözcükleri kullanılır; bu alışkanlık grid ile çalışırken de işinize yarar.

Başlangıç değerleri: display: flex dediğinizde ne olur?

Kapsayıcıya yalnızca display: flex yazdığınızda, ilgili özelliklerin başlangıç değerleri devreye girer. MDN'in temel kavramlar rehberi bu varsayılan davranışı şöyle özetler:

• Öğeler bir satırda dizilir, çünkü flex-direction başlangıç değeri rowdır.
• Öğeler ana eksenin başlangıç kenarından itibaren yerleşir.
• Öğeler ana eksende büyümez ama küçülebilir: flex-grow başlangıçta 0, flex-shrink ise 1dir.
• Öğeler çapraz eksende kapsayıcının boyunu doldurmak için uzar; çünkü align-items varsayılanı flex öğelerinde stretch gibi davranır.
• flex-basis başlangıç değeri autodur; öğenin bir genişliği varsa o, yoksa içerik boyutu temel alınır.
• Tüm öğeler tek satırda kalır (flex-wrap: nowrap); toplam boyut kapsayıcıyı aşarsa öğeler önce küçülür, küçülemezlerse taşar.

Sonuç olarak öğeler yan yana, içerikleri kadar yer kaplayarak dizilir ve en uzun içeriğe sahip öğe satırın yüksekliğini belirler; diğerleri de o yüksekliğe uzar. Eşit yükseklikli sütunlar flexbox'ın sihirli bir özelliği değil, align-items başlangıç davranışının doğal bir sonucudur. Kapsayıcıda kalan boş alan ise varsayılan olarak son öğeden sonra bırakılır.

flex-direction ile yönü değiştirmek

flex-direction yalnızca flex kapsayıcıda anlamlıdır; display değeri flex ya da inline-flex olmayan bir öğede etkisi yoktur. Aşağıdaki örnekte bir kart, içindeki başlık, metin ve butonu alt alta dizen bir sütun kapsayıcıya dönüşür.

.kart {
  display: flex;
  flex-direction: column;   /* ana eksen artık yukarıdan aşağıya */
}
/* sonuç: kartın çocukları alt alta dizilir ve varsayılan stretch
   nedeniyle her biri kartın genişliği boyunca uzar */

row-reverse ve column-reverse değerleri başlangıç ile bitiş çizgilerinin yerini değiştirir. Örneğin soldan sağa bir dilde row-reverse ilk öğeyi en sağa koyar ve diğerlerini sola doğru dizer. Bu değişiklik yalnızca görseldir; aşağıdaki erişilebilirlik bölümünde neden önemli olduğunu anlatıyoruz.

flex-wrap: öğeler sığmadığında ne olur?

flex-wrap başlangıç değeri nowrapdır; yani öğeler tek bir satıra zorlanır. Öğelerin toplam boyutu kapsayıcıdan büyükse flex-shrink: 1 sayesinde önce küçülürler. Küçülemezlerse ya da yeterince küçülemezlerse kapsayıcıdan taşarlar. Öğelerin yeni satırlara geçmesini istiyorsanız wrap değerini kullanırsınız; wrap-reverse ise aynı işi yapar ama satırları ters sırayla dizer.

.etiketler {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}
.etiketler > * {
  flex: 1 1 160px;   /* 160px temelden büyüyüp küçülebilir */
}
/* sonuç: bir satıra 160px'lik yeni bir öğe sığmadığında yeni satır açılır;
   öğeler büyüyebildiği için her satırı tamamen doldurur */

Bu örnek MDN'in kaydırma rehberindeki örneğe dayanır. 500 piksellik kapsayıcıya 160 piksellik öğelerden en fazla üç tanesi sığar (3 x 160 = 480), dördüncü öğe için 640 piksel gerekir. Bu yüzden her satırda üç öğe olur. On öğe varsa son satırda tek bir öğe kalır ve büyüyebildiği için bütün satırı doldurur. Bu durum, flexbox'ın her satırı bağımsız bir kapsayıcı gibi ele almasının en görünür sonucudur.

Sütun yönünde kaydırma da mümkündür; ancak yeni sütunların açılabilmesi için kapsayıcının bir yüksekliği olması gerekir. Ayrıca row-reverse ile kaydırma birlikte kullanıldığında ters çevirme yalnızca satır içi yönde olur: her satır sağdan başlar, ama satırlar yine yukarıdan aşağıya eklenir.

Dengeli kaydırma: balance ve flex-line-count

MDN'in güncel kopyası flex-wrap için bir de balance anahtar sözcüğünü belgeler. Normal kaydırmada her satır sonuna kadar doldurulur ve son satırda az sayıda öğe kalabilir. flex-wrap: wrap balance ise öğeleri satır uzunlukları birbirine olabildiğince yakın olacak biçimde dağıtır. Yalnızca balance yazarsanız diğer anahtar sözcük wrap kabul edilir; nowrap ile birlikte kullanılırsa bildirim geçersiz olur ve yok sayılır. flex-line-count özelliği de dengeli bir kapsayıcıda öğelerin dağıtılacağı en az satır sayısını belirler; balance yoksa etkisi yoktur.

flex-flow kısaltması

flex-direction ile flex-wrap birlikte flex-flow kısaltmasıyla yazılabilir. MDN'in flex-direction sayfası da bu iki özelliğin kısaltmayla ayarlanmasını önerir. Yalnızca birini yazmanız da geçerlidir: flex-flow: column yön, flex-flow: wrap kaydırma değeri olarak okunur.

.galeri {
  display: flex;
  flex-flow: row wrap;        /* flex-direction: row; flex-wrap: wrap; */
}
.yan-panel {
  display: flex;
  flex-flow: column;          /* yalnızca yön; flex-wrap başlangıç değerine döner */
}

Kısaltma kullanırken unutulan şey, yazmadığınız alt özelliğin başlangıç değerine sıfırlanmasıdır. Örneğin önce flex-wrap: wrap verip sonra aynı öğeye flex-flow: column yazarsanız kaydırma nowrap'a döner. Kısaltmaların bu davranışı cascade ve kalıtım yazısındaki genel kurallarla aynıdır.

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

order özelliği tek tek öğelerin görsel sıradaki yerini değiştirir. Değer bir tam sayıdır ve öğeyi bir sıra grubuna yerleştirir. Tarayıcı öğeleri bu sayıya göre küçükten büyüğe dizer; aynı sayıya sahip öğeler kendi aralarında kaynak koddaki sıralarını korur. Değer verilmemiş öğelerin order değeri 0dır. order yalnızca flex ve grid öğelerinde çalışır; ebeveyni flex ya da grid kapsayıcı olmayan bir öğede hiçbir etkisi yoktur.

.kutu :nth-child(1) { order: 2; }
.kutu :nth-child(2) { order: 3; }
.kutu :nth-child(3) { order: 1; }
.kutu :nth-child(4) { order: 3; }
.kutu :nth-child(5) { order: 1; }
/* görsel sıra: 3, 5, 1, 2, 4
   order 1 grubu: 3 ve 5 (kaynak sırasıyla)
   order 2 grubu: 1
   order 3 grubu: 2 ve 4 (kaynak sırasıyla) */

Negatif değerler de geçerlidir ve çoğu zaman en kullanışlı olanlardır. Bir öğeyi diğerlerinin sırasını bozmadan en başa almak istiyorsanız ona order: -1 vermeniz yeterlidir; -1 varsayılan 0'dan küçük olduğu için öğe her zaman önce gelir. order ayrıca boyama sırasını da etkiler: küçük değerli öğeler önce, büyük değerli öğeler sonra çizilir. flex-direction ile yapılan tersine çevirme ise boyama sırasını değiştirmez.

.haber-karti {
  display: flex;
  flex-direction: column;
}
.haber-karti .tarih {
  order: -1;     /* tarih görsel olarak başlığın üstüne çıkar */
}
/* kaynakta başlık önce geldiği için ekran okuyucu önce başlığı okur */

Bu desen MDN'in önerdiği türden küçük bir görsel düzenlemedir: kaynakta başlık önce durur, böylece ekran okuyucu kullanıcıları ve başlıklar arasında gezinenler önce başlığa ulaşır; görsel tasarımda ise tarih başlığın üstünde görünür.

Görsel sıra ile mantıksal sıra arasındaki fark

order ve *-reverse değerleri yalnızca görsel sunumu değiştirir. Klavyeyle Tab tuşuna basıldığında odak sırası ve sesli okuma sırası her zaman kaynak koddaki sırayı izler. Bir gezinme menüsünü row-reverse ile ters çevirirseniz klavye kullanıcısı odağın ekranda sağdan sola değil, beklenmedik biçimde atladığını görür. Flexbox belirtimi bu konuda açık bir uyarı içerir: order ya da ters değerler, doğru kaynak sıralamasının yerine kullanılmamalıdır. MDN'in önerisi, mantıksal sırayı HTML'de doğru kurmak, order'ı yalnızca saf görsel ince ayarlar için kullanmak ve klavye odağı alan öğeleri yeniden sıralamamaktır. Değişikliklerinizi fare kullanmadan yalnızca klavyeyle test etmek bu sorunları hemen ortaya çıkarır.

Flex kapsayıcı normal blok düzeninden nasıl ayrılır?

MDN'e göre display: flex verilmiş bir öğe çoğu açıdan kendi içerik bloğunu kuran sıradan bir blok kapsayıcı gibi davranır, ancak birkaç önemli fark vardır:

• Float içeri girmez: Dışarıdaki float öğeler flex kapsayıcının içine taşmaz.
• Kenar boşlukları çökmez: Kapsayıcının margin değerleri komşularıyla çökmez; çökme kuralları için margin collapsing yazısına bakabilirsiniz.
• Öğelerdeki float yok sayılır: Bir çocuk float: left taşısa bile ebeveyni flex olduğunda float ve clear uygulanmaz; öğe normal flex öğesi gibi yerleşir.
• vertical-align etkisizdir: inline-block ya da tablo düzeninde kullanılan vertical-align flex öğelerini etkilemez; bunun yerine flexbox hizalama özelliklerini kullanırsınız.

Bu farklar eski float tabanlı düzenleri flexbox'a taşırken işe yarar: kapsayıcıya display: flex eklediğiniz anda float'ların neden olduğu yükseklik çökmesi ortadan kalkar, çünkü öğeler artık float değildir.

Flexbox ile yapılan sık hatalar

• Torunların flex öğesi olmasını beklemek: Flex düzeni yalnızca doğrudan çocuklara uygulanır. İç içe öğeleri düzenlemek için içteki öğeyi de flex kapsayıcı yapmanız gerekir.
• Kaydırma için yalnızca width vermek: flex-wrap başlangıçta nowrap olduğu için öğeler genişlik verseniz bile alt satıra geçmez; önce küçülür, sonra taşar.
• Sütun kaydırmada yükseklik vermemek: flex-direction: column ile wrap birlikte kullanıldığında kapsayıcının bir yüksekliği yoksa yeni sütun açılmaz.
• order ile içerik sırasını düzeltmeye çalışmak: Görsel sıra değişir, ama klavye ve ekran okuyucu sırası değişmez.
• Flex öğelerine genişlik vererek ızgara kurmak: MDN, satırlardaki öğeleri üstteki satırla hizalamak için yüzdelik genişlikler ya da boş öğeler eklemeye başladıysanız grid düzenine geçmenin daha uygun olduğunu söyler.

Sık Sorulan Sorular

display: flex ile display: inline-flex arasındaki fark nedir?

Her ikisi de çocukları için aynı flex düzenini kurar. Fark, kapsayıcının dışarıya karşı nasıl davrandığıdır: flex blok düzeyinde bir kutu üretir ve kendi satırını kaplar, inline-flex ise satır içi düzeyde bir kutu üretir ve metin akışı içinde yan yana durabilir.

justify-items flexbox'ta çalışır mı?

Hayır. MDN'e göre justify-items flex düzeninde yok sayılır; place-items kısaltmasını bir flex kapsayıcıda kullandığınızda yalnızca align-items kısmı etkili olur. Ana eksende tek bir öğeyi ayırmak için otomatik margin kullanılır.

order değeri sekme (Tab) sırasını değiştirir mi?

Hayır. order görsel sırayı ve boyama sırasını değiştirir, ama sıralı gezinme sırası kaynak koddaki sırayı izlemeye devam eder.

Ne zaman flexbox yerine grid kullanmalıyım?

Düzeni yalnızca satır ya da yalnızca sütun olarak kontrol etmeniz yetiyorsa flexbox, satırları ve sütunları birlikte kontrol etmeniz gerekiyorsa grid uygundur. İki yöntemin karşılaştırması CSS grid rehberi yazısında da var.

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 · Flexbox hizalama · flex-grow, flex-shrink, flex-basis · CSS grid rehberi · display değerleri