Kısaca flexbox olarak ifade edebileceğimiz CSS Esnek Kutu Düzeni, bir CSS3 web mizanpaj modelidir. CSS Esnek Kutu Düzeni Modülü Seviye 1, W3C’nin Aday Öneri Durumu aşamasında bir iyileştirmedir. Flexbox, temelde ekran boyutuna veya cihaza bağlı olarak duyarlı öğeleri otomatik olarak görüntüleyen 2 boyutlu bir hareket alanıdır. Olarak düzenlenmesine izin verir. Peki, flexbox hangi ihtiyaç temelinde bir çözüm olarak önerilir? Öncelikle, Flexbox Yerleşim Modülünden önce sahip olduklarımıza bir göz atalım:
- Block (div ve/veya section için)
- Inline (metinler için)
- Table (iki boyutlu tablo verileri için)
- Positioned (elementin konumlandırılması için)
Yıllar önce HTML / CSS çalışmalarında, mizanpaj çalışması için (tablo) mizanpajlar kullandık. Tarayıcı ile cihaz arasındaki farkları bir tarafa bırakırsak, belirtilen boyutlar dahilindeki elemanları rahatlıkla sunabiliriz. Ancak unsurları yeni cihazlarla dinamik olarak sunma ihtiyacı ortaya çıktı. Bu süreç duyarlı tasarım olarak ifade edildi ve bu süreçte (tablo) kullanımı yetersiz kaldı. (Div veya bölümler) daha yoğun kullanmaya başladık. Ancak bu süreçte bir noktadan sonra (yatay ve / veya dikey konumlandırma, genişlik-yükseklik ayarı, sıralama vb. Nedenlerle) tıkanmaya başladı. Flexbox, bu sorunları çözmek için geliştirilmiş ve tüm modern tarayıcılar tarafından desteklenen bir modül olarak sunuldu.
justify-content Özelliği
Yaslama-içerik Özelliğindeki öğeleri yatay olarak hizalamak için kullanılır.
flex-start: Öğeleri flexbox konteynerin sol tarafına hizalar.
flex-end: Öğeleri flexbox konteynerin sağ tarafına hizalar.
center: Flexbox kabının ortasındaki öğeleri hizalar.
space-between: Öğeler eşit aralıklarla yatay olarak yayılır.
space-around: Öğeler, etraflarında eşit aralıklarla yatay olarak yayılır.
justify-content: center niteliği, öğeleri yatay olarak ortalar.
align-items Özelliği
Align-items özelliği, içindeki elemanları dikey olarak hizalamak için kullanılır.
- flex-start: Öğeleri flexbox kabının üstüne hizalar.
- flex-end: Flexbox kabının altındaki öğeleri hizalar.
- center: Öğeleri flexbox konteynerin dikey merkezine hizalar.
- baseline: Öğeleri flexbox kabının metin taban çizgisine hizalar.
- strech: Öğeler flexbox konteyner boyunca uzanır.
align-items: merkez özelliği öğeleri dikey olarak ortalar.
flex-direction Özelliği
Flex-direction özelliği, öğelerin hangi yönde yerleştirileceğini belirler.
- row: Öğeler, metin yönüyle aynı yönde yerleştirilir.
- row-reverse: Öğeler metnin tersi yönde yerleştirilir.
- column: Öğeler yukarıdan aşağıya yerleştirilir.
- column-reverse: Öğeler aşağıdan yukarıya doğru yerleştirilir.
flex-direction: column özelliği, öğeleri yukarıdan aşağıya sıralamayı sağlar.
flex-wrap Özelliği
Flex-wrap özelliği, birden fazla satırda görüntülenecek öğelerin nasıl davranacağını belirlemek için kullanılır.
- nowrap: Tüm öğeler bir satıra sığar.
- wrap: Öğeler satırlara bölünür.
- wrap-reverse: Öğeler, satırları ters sırada bölünür.
