Kısaca flexbox olarak ifade edebileceğimiz CSS Esnek Kutu Düzeni, bir CSS3 web düzeni (layout) modelidir.30 Kasım 2020Kısaca flexbox olarak ifade edebileceğimiz CSS Esnek Kutu Düzeni, bir CSS3 web düzeni (layout) modelidir. CSS Flexible Box Layout Module Level 1 W3C‘nin aday öneri (Candidate Recommendation State) aşamasındaki bir geliştirmedir.Flexbox, temel olarak 2 boyutlu bir hareket alanı içerisinde duyarlı (responsive) elementlerin ekran boyutuna (screen size) veya cihaza (device) bağlı olarak otomatik olarak düzenlenmesini sağlar. Peki, flexbox hangi ihtiyaç temelinde çözüm olarak önerilmekte? Öncelikle, Flexbox Layout Module öncesinde elimizde neler olduğuna bir bakalı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)
HTML/CSS çalışmalarında yıllar öncesinde düzen çalışmaları için (table) düzenlerini kullanırdık. Tarayıcı ve cihaz farklılıklarını bir yana bırakırsak, belirlenen ölçüler içerisinde elementleri kolaylıkla sunabilmekteydik. Ancak, yeni cihazlar, çözünürlüklerle birlikte elementleri dinamik bir şekilde sunma ihtiyacı ortaya çıktı. Bu süreç duyarlı (responsive) tasarım olarak ifade edildi ve (table) kullanımı bu süreçte yetersiz kaldı. Artık (div veya section)’leri daha yoğun bir şekilde kullanmaya başladık. Ancak, bu süreçte bir noktadan sonra (yata ve/veya dikey konumlandırma, genişlik-yükseklik ayarlama, sıralama vb. nedenlerle) tıkanmaya başladı. Flexbox işte bu yaşanan sorunları çözmek amacıyla geliştirilen ve tüm modern tarayıcılar tarafından desteklenen bir modül olarak sunuldu.
Flexbox Nasıl Kullanılır?
.flex-container {
display: flex;
}
justify-content Özelliği
justify-content Özelliği içindeki elemanların yatayda hizalamaya yarar.
flex-start: Öğeleri flexbox container’ın sol tarafına hizalar.
flex-end: Öğeleri flexbox container’ın sağ tarafına hizalar.
center: Öğeleri flexbox container’ın ortasına hizalar.
space-between: Öğeler eşit aralıklarla yatay şekilde yayılır.
space-around: Öğeler etraflarında eşit aralıklar olacak şekilde yatay şekilde yayılır.
.flex-container {
display: flex;
justify-content: center;
}
justify-content: center özelliği öğeleri yatayda ortalar.
align-items Özelliği
align-items Özelliği içindeki elemanların dikeyde hizalamaya yarar.
flex-start: Öğeleri flexbox container’ın tepesine hizalar.
flex-end: Öğeleri flexbox container’ın aşağısına hizalar.
center: Öğeleri flexbox container’ın dikey ortasına hizalar.
baseline: Öğeleri flexbox container’ın yazı referans çizgisine(baseline) hizalar.
stretch: Öğeler flexbox container boyunca uzarlar.
.flex-container {
display: flex;
align-items: center;
}
align-items: center özelliği öğeleri dikeyde ortalar.
flex-direction Özelliği
flex-direction özelliği öğelerin hangi yönde yerleştireleceğini belirler.
row: Öğeler yazı yönü ile aynı yönde yerleştirilir.
row-reverse: Öğeler yazı yönünün tersi yönünde yerleştirilir.
column: Öğeler yukarıdan aşağıya doğru yerleştirilir.
column-reverse: Öğeler aşağıdan yukarıya doğru yerleştirilir.
.flex-container {
display: flex;
flex-direction: column;
}
flex-direction: column özelliği öğeleri yukarıdan aşağıya sıralamaya yarar.
flex-wrap Özelliği
flex-wrap özelliği birden fazla satırda gösterilecek öğelerin nasıl bir davranış sergileyeceğini belirlemek için kullanılır.
nowrap: Tüm öğeler tek satıra sığar.
wrap: Öğeler satırlara bölünür.
wrap-reverse: Öğeler satırlara ters sırada bölünür.
.flex-container {
display: flex;
flex-wrap: wrap;
}
