CSS Flexbox Generator

Flexbox iki eksen üzerine kuruludur

Bir öğeye display: flex verdiğinde o öğe flex kapsayıcısına, doğrudan çocukları da flex öğesine dönüşür. Bundan sonra düzeni yöneten şey iki eksendir: ana eksen ve karşı eksen. Ana ekseni flex-direction belirler. Değer row ise ana eksen yatay, karşı eksen dikeydir; column yaptığın anda ikisi yer değiştirir.

Bu ayrım küçük görünür ama her şeyi değiştirir. justify-content her zaman ana eksende, align-items her zaman karşı eksende hizalar. row düzeninde justify-content: center içeriği yatayda ortalar, flex-direction değerini column yaptığın anda aynı satır içeriği dikeyde ortalamaya başlar. Flexbox ile ilgili en sık yaşanan kafa karışıklığı buradan doğar, bu yüzden araçtaki eksen notu ekranda sürekli açık durur.

Kapsayıcıya yazdığın özellikler

• flex-direction: öğelerin hangi eksende ve hangi yönde dizileceğini söyler. row, row-reverse, column ve column-reverse değerlerini alır.
• flex-wrap: öğeler sığmadığında ne olacağını belirler. Varsayılan nowrap her şeyi tek satıra sıkıştırır, wrap ise alt satıra taşınmasına izin verir.
• justify-content: ana eksende artan boşluğu dağıtır. space-between ilk ve son öğeyi kenarlara yaslar, space-around her öğeye eşit pay verir, space-evenly bütün aralıkları eşitler.
• align-items: öğeleri karşı eksende hizalar. Varsayılan stretch, öğeleri kapsayıcının karşı eksendeki boyu kadar uzatır. baseline ise farklı punto büyüklüklerindeki metinleri aynı taban çizgisine oturtur.
• align-content: satırların kendisini karşı eksende hizalar. Yalnızca birden fazla satır varsa, yani flex-wrap açıksa bir işe yarar.
• gap, row-gap ve column-gap: öğelerin arasındaki boşluğu tanımlar. Kenarlara boşluk eklemez, yalnızca aralara koyar.

flex kısayolu ve flex: 1 değerinin görünmeyen kısmı

flex, üç özelliğin kısayoludur: flex-grow, flex-shrink ve flex-basis. flex: 1 yazdığında tarayıcı bunu flex: 1 1 0% olarak açar. Yani yalnızca büyüme katsayısını değil, öğenin temel boyutunu da ayarlamış olursun.

Fark tam burada. flex-grow: 1 tek başına yazıldığında flex-basis auto kalır, yani her öğe önce kendi içeriği kadar yer kaplar ve artan boşluk ondan sonra paylaştırılır. İçeriği uzun olan öğe geniş, kısa olan dar kalır. flex: 1 ise temel boyutu sıfırlar, içerik ne olursa olsun bütün öğeler eşit genişlik alır. Eşit sütunlar istiyorsan flex: 1, içerikle orantılı sütunlar istiyorsan flex-grow: 1 doğru olanıdır.

flex-shrink çalışmıyorsa suçlu genelde min-width

Flex öğelerinin varsayılan flex-shrink değeri 1’dir, yani yer kalmadığında küçülürler. Ama bir sınır vardır: bir öğe kendi min-content boyutunun altına inmez. Uzun bir kelime, kırılmayan bir tablo ya da satır sonu alamayan bir metin öğeyi olduğu yerde tutar ve kapsayıcıdan taşırır.

Çözüm, o öğeye min-width: 0 vermektir; column düzeninde karşılığı min-height: 0 olur. Bu, örtük min-content sınırını kaldırır ve öğenin gerçekten küçülmesine izin verir. Bir flex öğesinin içinde text-overflow: ellipsis ya da overflow: hidden çalışmıyorsa, durumların büyük çoğunluğu bu tek satırla düzelir.

align-items ile align-content karıştırılıyor

İkisi de karşı eksende hizalar ama farklı şeyleri hizalar. align-items öğeleri kendi satırlarının içinde konumlandırır. align-content ise satırların tamamını kapsayıcının içinde konumlandırır.

Tek satır varken align-content hiçbir şey yapmaz, çünkü hizalanacak ikinci bir satır yoktur. Bu yüzden araçta flex-wrap değeri nowrap iken align-content düğmeleri pasif görünür. Etkisini görmek için önce flex-wrap değerini wrap yapman gerekir.

gap, margin numaralarından daha iyi bir çözüm

Eskiden öğelerin arasına boşluk koymak için son öğe hariç hepsine margin-right verilirdi. gap bu numaraya gerek bırakmaz: yalnızca öğelerin arasına boşluk koyar, kenarlarda fazladan boşluk bırakmaz ve satır atlandığında dikey boşluğu da kendisi halleder. Flexbox tarafında gap desteği 2021’den beri bütün güncel tarayıcılarda var, bu yüzden bugün rahatça kullanılabilir.

order görsel sırayı değiştirir, gerçek sırayı değil

order öğelerin ekrandaki sırasını değiştirir ama HTML içindeki sırasını değiştirmez. Sekme tuşuyla gezinen bir kullanıcı ya da ekran okuyucu, kaynaktaki sırayı takip eder. Görsel sıra ile okuma sırası ayrıştığında ortaya gezinmesi zor bir sayfa çıkar.

Bu yüzden order özelliğini küçük düzeltmeler için kullan, sayfanın asıl kurgusunu HTML içinde doğru sırayla yaz. Aynı uyarı row-reverse ve wrap-reverse için de geçerlidir.

Flexbox mu, Grid mi?

Pratikte ikisi rakip değil. Sayfanın genel iskeletini Grid ile kurup, o iskeletin içindeki kart başlığını, buton grubunu ya da üst menüyü Flexbox ile dizmek en yaygın yaklaşımdır. Bir düzende satır ve sütunların birlikte hizalı kalması gerekiyorsa Grid, tek bir yönde akan ve içeriğin boyuna göre esneyen bir dizilim gerekiyorsa Flexbox doğru araçtır.

Çıktı neden bu kadar kısa?

Araç yalnızca CSS’in varsayılan değerinden farklı olan satırları yazar. flex-direction: row, flex-wrap: nowrap ya da align-items: stretch zaten tarayıcının varsayılanı olduğu için çıktıya hiç girmez. Aynı şekilde hiç özelleştirmediğin bir öğe için ayrı bir kural üretilmez. Böylece kopyaladığın blok, projendeki stil dosyasını gereksiz satırlarla şişirmez.

Sık yapılan hatalar

• Yükseklik vermeden align-items: center yazmak. Kapsayıcının karşı eksende boş alanı yoksa ortalanacak bir şey de yoktur.
• Flex öğesinin kendisine justify-content yazmak. Bu özellikler yalnızca display: flex olan kapsayıcıya etki eder.
• flex-basis ile width değerini aynı anda vermek. row düzeninde flex-basis kazanır ve width sessizce göz ardı edilir.
• Taşmayı engellemek için overflow: hidden yazıp min-width: 0 satırını unutmak.
• Torun öğelerin de flex öğesi olmasını beklemek. Flexbox yalnızca bir seviye derinliğe, doğrudan çocuklara uygulanır.

Arka plan ve renk tarafında da hızlı bir çıktıya ihtiyacın olursa CSS gradyan oluşturucu aynı mantıkla çalışır: ayarları değiştir, sonucu önizlemede gör, kodu kopyala.