Flexbox Nedir?
Kısa tanım
Flexbox (CSS Flexible Box Layout), öğeleri tek bir eksen boyunca, yani bir satırda veya bir sütunda dizmek, aralarındaki boşluğu dağıtmak ve hizalamak için kullanılan tek boyutlu bir CSS düzen modelidir. Kapsayıcıya display: flex verildiğinde alt öğeler esnek hâle gelir; içeriğe ve kalan alana göre büyüyüp küçülebilir. Navigasyon çubukları, buton grupları ve dikey ortalama gibi işler için tipik araçtır.
Diğer adları: Flexible Box Layout, CSS Flexbox, display: flex, esnek kutu düzeni
Ana eksen ve çapraz eksen
Flexbox'ta her şey iki eksene göre düşünülür. Ana eksen, öğelerin dizildiği yöndür ve flex-direction ile belirlenir: varsayılan row değerinde yataydır, column değerinde dikey. Çapraz eksen ona diktir. Hizalama özellikleri de bu eksenlere bağlıdır:
justify-content: Öğeleri ana eksende dağıtır (başa, sona, ortaya, aralarına eşit boşlukla).align-items: Öğeleri çapraz eksende hizalar (üst, alt, orta, gerilmiş).gap: Öğeler arasındaki boşluğu, kenar boşluğu hilelerine gerek kalmadan tanımlar.flex-wrap: Sığmayan öğelerin yeni bir satıra geçmesine izin verir.
Yön column olduğunda eksenler yer değiştirir: justify-content artık dikey dağılımı kontrol eder. Flexbox'la ilgili kafa karışıklığının büyük kısmı bu ayrıntıdan doğar.
flex: 1 aslında ne söylüyor?
flex kısa yazımı üç değeri birleştirir: büyüme katsayısı (flex-grow), küçülme katsayısı (flex-shrink) ve hesaba başlangıç boyutu (flex-basis).
| Yazım | Açılımı | Davranış |
|---|---|---|
flex: 1 | 1 1 0% | Başlangıç boyutu sıfır; kalan alan eşit paylaşılır, öğeler içerikten bağımsız olarak eşit genişlikte olur. |
flex: auto | 1 1 auto | Önce içerik boyutu alınır, kalan alan sonra paylaşılır; uzun içerikli öğe daha geniş kalır. |
flex: none | 0 0 auto | Ne büyür ne küçülür; ikonlar ve sabit genişlikli öğeler için. |
| varsayılan | 0 1 auto | Büyümez ama yer daralırsa küçülür. |
Tipik örnek: navigasyon çubuğu
.ust-bar {
display: flex;
align-items: center;
gap: 1rem;
}
.ust-bar .logo { flex: none; }
.ust-bar .giris { margin-inline-start: auto; } /* sağa it */
/* Dar ekranda alt alta */
@media (width < 40em) {
.ust-bar { flex-wrap: wrap; }
}margin-inline-start: auto, bir öğeyi ve ondan sonrakileri satırın sonuna iter; flexbox'ta en kullanışlı küçük tekniklerden biridir. Aynı mantık, bir UI bileşeni içindeki ikon ve metni hizalamak veya bir kartın butonunu kartın en altına itmek (flex-direction: column ile birlikte margin-block-start: auto) için de kullanılır. Menünün kendisinin nasıl kurgulanacağı ise site navigasyonu konusudur.
Grid mi, Flexbox mu?
MDN'in önerdiği soru basittir: Düzeni yalnızca satır ya da sütun boyunca mı kontrol etmeniz gerekiyor, yoksa satır ve sütun boyunca aynı anda mı? İlki Flexbox'ın, ikincisi CSS Grid'in işidir. Flexbox içerikten dışarıya doğru çalışır: öğelerin boyutu alanı belirler. Grid ise dışarıdan içeriye: önce ızgara kurulur, öğeler ona yerleşir.
Pratik bir işaret: Flexbox ile çalışırken alt satırdaki öğeleri üst satırla hizalamak için öğelere sabit genişlik vermeye başladıysanız, aslında iki boyutlu bir düzen kuruyorsunuzdur ve Grid daha uygun olabilir. İkisi birbirinin rakibi değildir; sayfa iskeleti Grid ile, her hücrenin içi Flexbox ile kurulabilir.
Sık karşılaşılan tuzaklar
- Taşan metin: Flex öğelerinin varsayılan en küçük genişliği içeriği kadardır. Uzun bir URL veya kelime, öğeyi daralmaktan alıkoyup taşmaya yol açar; çözüm genellikle öğeye
min-width: 0vermektir. - Son satırın gerilmesi:
flex-wrapile kart listesi kurulduğunda son satırdaki tek kart tüm genişliği kaplayabilir. Eşit hücreler isteniyorsa Grid daha doğru araçtır. - order ve row-reverse: Görsel sırayı değiştirmek, klavye odağının ve ekran okuyucunun izlediği kaynak sırasını değiştirmez. Okuma sırası HTML'de doğru kurulmalıdır.