CSS Flexbox Nedir, Nasıl Kullanılır?

Kısaca flexbox olarak ifade edebileceğimiz CSS Esnek Kutu Düzeni, bir CSS3 web düzeni (layout) modelidir. 30 Kasım 2020

Kı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;
}

Benzer Blog yazıları

CSS3 Nedir?

CSS3, CSS'in daha önceki sürümleri üzerine geliştirilmiş üçüncü sürümüdür. CSS (Casc...Devamı…

Foundation Framework Nedir?

Foundation Framework Nedir? Modern bir HTML5 framework’ü olan Foundation, hem mobilde hem de masaüstünde web geliştiricilerinin ...Devamı…

Photoshop Nedir? Photoshop Nasıl Kullanılır?

Photoshop Nedir ?   Photoshop, önceden oluşturulmuş grafiklerinizi ve fotoğraflarınızı vektörel olarak değiştirip yapılandırabileceği...Devamı…

Web Tasarımı ve Responsive

Web tasarım günümüzde kullanılan en yaygın pazarlama ağıdır. Bu nedenle doğru bir web sitesi ile potansiyel müşterilerinizi a...Devamı…

Hızlı İletişim
Hızlı İletişim+90 212 347 33 11info@ata.com.trTeklif İste
Teklif İste