CSS flex nedir?

CSS flex, bir kapsayıcı içindeki öğeleri tek bir eksende; yatay satır veya dikey sütun olarak düzenlemeye yarayan esnek yerleşim modelidir. Kapsayıcıya display: flex verildiğinde kapsayıcı flex container, doğrudan altındaki öğeler ise flex item olur. Öğeler kullanılabilir boşluğu paylaşabilir, daralabilir, büyüyebilir ve kolayca hizalanabilir.

Burada iki benzer kullanım birbirinden ayrılmalıdır: display: flex flexbox yerleşimini başlatır; flex ise bir flex item'ın büyüme, küçülme ve başlangıç boyutunu belirleyen kısa yazımdır.

En küçük çalışan örnek​

Aşağıdaki örnekte üç kutu aynı satırda düzenlenir ve aralarına boşluk bırakılır:


Bu kodu bir HTML dosyasına yerleştirip tarayıcıda açtığınızda bağlantıların tek satırda hizalandığını görürsünüz. Genişlik azaldığında öğeler daralır. İçerik taşarsa veya mobil görünümde alt alta dizilmesini istiyorsanız kapsayıcıya flex-wrap: wrap ya da flex-direction: column ekleyebilirsiniz.

Flex nasıl çalışır?​

Flex düzeninde iki eksen bulunur:

• Ana eksen: Öğelerin dizildiği yöndür. Türkçe gibi yatay yazım düzeninde varsayılan yön satırdır ve flex-direction: row ile ifade edilir.
• Çapraz eksen: Ana eksene dik yöndür. Yatay satırda çapraz eksen dikeydir.
• justify-content: Öğeleri ana eksen üzerinde hizalar. Örneğin center, space-between ve flex-end kullanılabilir.
• align-items: Öğeleri çapraz eksen üzerinde hizalar. Dikeyde ortalamak için yatay satır düzeninde genellikle align-items: center kullanılır.
• gap: Öğeler arasındaki boşluğu belirler; gereksiz kenar boşluğu hesaplarını azaltır.

Bir flex item için kullanılan flex özelliği üç değerin kısa yazımıdır: flex-grow, flex-shrink ve flex-basis. Tek sayı olan flex: 1 tarayıcılarda genellikle 1 1 0% biçiminde açılır. Örnekte üç değerin açık yazılması büyüme, küçülme ve temel boyutu görünür kılar; flex: 0 0 240px ise öğeyi 240 piksel temel boyutla büyümeyen ve küçülmeyen bir öğe yapar.

Hangi özelliği ne zaman kullanmalı?​

Aynı yerleşim için en uygun seçimi aşağıdaki gibi yapabilirsiniz:


Bir kapsayıcıda display: flex çalışmıyorsa önce seçicinin doğru elemana uygulandığını kontrol edin. Flex özellikleri kapsayıcıya ve doğrudan çocuklarına uygulanır; torun öğeler kendiliğinden flex item olmaz. Ayrıca justify-items flexbox için doğru hizalama özelliği değildir; ana eksen hizalaması için justify-content kullanılmalıdır.

Responsive kullanım için kararlar​

Kartlar veya menü öğeleri dar ekranlarda taşabiliyorsa şu sırayı izleyin:

1. Kapsayıcıya display: flex ekleyin.
2. Öğelerin taşmasını önlemek için gerekiyorsa flex-wrap: wrap kullanın.
3. Öğeler alt alta geçmeliyse bir medya sorgusunda flex-direction: column tanımlayın.
4. Öğelerden biri kalan alanı dolduracaksa yalnızca o öğeye flex: 1 verin.
5. Metin veya uzun içerik taşması varsa ilgili item üzerinde min-width: 0 değerini deneyin; flex item'lar varsayılan minimum içerik boyutu nedeniyle beklenenden fazla genişleyebilir.

Flexbox, tek boyutlu yerleşimler için uygundur: menü, buton grubu, kart satırı veya bir form satırı gibi. Aynı anda hem satır hem sütun eksenlerinde karmaşık bir sayfa ızgarası kuruyorsanız CSS Grid daha uygun olabilir; ancak bir Grid öğesinin içindeki yatay veya dikey hizalama için flex kullanmak yine pratik bir seçimdir.

Sık sorulan sorular​

flex-wrap açıldığında bütün satırlar ortak sütunlara hizalanır mı?​

Hayır. Her flex satırı boşluğunu kendi içinde dağıtır; bir üst satırdaki öğenin genişliği alt satırdaki aynı konumu otomatik belirlemez. Birden çok satırda ortak sütun çizgileri gerekiyorsa Grid’i değerlendirin. Wrap kullanmak tek boyutlu modeli iki boyutlu ortak ızgaraya dönüştürmez.

order değeri klavyeyle gezinme sırasını değiştirir mi?​

Görsel sıralamayı değiştirmek kaynak/DOM sırasını aynı biçimde değiştirmez. Klavye ve yardımcı teknoloji akışının görsel yerleşimden kopmaması için HTML sırasını anlamlı kurun. Yalnız görüntüyü düzeltmek amacıyla önemli içerik sırasını order ile yeniden düzenlemek kullanılabilirlik sorunu oluşturabilir.