CSS Flexbox Nedir? Flex Container Özellikleri Nelerdir?

Güncelleme Yayın

CSS yazı serisine CSS3 ile hayatımıza giren, layout (düzen) oluşturma sürecinde sıklıkla karşılaşılan sorunlara çözüm olarak sunulan yeni özelliklerle devam edelim. Amacım ilerleyen yazılarda değineceğim tema oluşturma aşamasında bu modern çözüm yollarını kullanarak örnekler geliştirmek. Bu anlamda, içeriğimizin başlığı Flexbox Layout Module (Esnek Kutu Modülü).

Flexbox Layout Module

Kısaca flexbox olarak ifade edebileceğimiz CSS Esnek Kutu Düzeni, bir CSS3 web düzeni (layout) modelidir1. CSS Flexible Box Layout Module Level 1 W3C‘nin aday öneri (candidate recommendation (CR) state) aşamasındaki bir geliştirmedir2. Flexbox, temel olarak 2 boyutlu bir hareket alanı içerisinde duyarlı (responsive) elementlerin ekran boyutuna (screen size) ve/ya 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 (division ve/ya section’lar 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 (tablo) 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 (division veya section)’leri daha yoğun bir şekilde kullanmaya başladık. Ancak, bu süreçte bir noktadan sonra (yata ve/ya 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 Elementleri

Flexbox model kullanımı için, öncelikle display: flex ile bir flex container tanımlamanız gerekmekte. Yazının geri kalan bölümünde container özelliklerine bakacağız. Bir sonraki yazıda da değineceğim konu flex container içerisinde yer alan flex item‘ların sahip olduğu özellikler olacak.

Flex Container

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
.flex-container {
  display: flex;
}
Flex container

Flex container tanımlamasından sonra esnek yapının nasıl davranması gerektiğini belirtmemiz gerekiyor. Bu amaçla kullanabileceğimiz özellikler ise şöyle:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
Flex Direction

flex-direction ile özelliklere göz atalım. flex-direction alt (child) elementlerin (item) yönünü belirlemek için kullanılır. Özellik, varsayılan olarak (row) yerleşimi yatayda gerçekleştirir. Özellik ayrıca farklı davranışlar için farklı seçenekler sunmaktadır.

.flex-container {
    flex-direction: row | row-reverse | column | column-reverse;
}
  • row (flex-direction: row): Soldan sağa doğru sıralar. Varsayılan seçenektir.
  • row-reverse (flex-direction: row-reverse): Sağdan sola doğru sıralar.
  • column (flex-direction: column): Yukarıdan aşağı doğru sıralar.
  • column-reverse (flex-direction: column-reverse): Aşağıdan yukarı doğru sıralar.
flex-direction: row

flex-direction: row ile item’lar sırasıyla soldan sağa hizalanır. flex-direction tanımı mevcut değilse ön tanımlı olarak row temel alınır.

flex-direction: row-reverse

row-reverse ise item’ların sağa dayalı ve sağdan sola hizalanmasını sağlar.

flex-direction: column

column item’ların yatay yerine dikey olarak hizalanmasını ve yukarıdan aşağıya sıralanmasını sağlar.

flex-direction: column-reverse

column-reverse ise item’ların dikeyde aşağıdan yukarıya sıralanmasını sağlar.

Flex Wrap

Ön tanımlı olarak flex item’lar tek bir satıra sığmaya çalışırlar. Diğer özelliklerle bu davranışı değiştirebilir, item’ların belirtilen şartlar dahilinde satırlara yayılmasını sağlayabiliriz.

.flex-container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap: Container içerisindeki tüm item’ları tek bir satıra sığacak şekilde, yan yana konumlandırır. Varsayılan seçenektir.
  • wrap: Item’lar gerektiğinde alt satırlara yukarıdan aşağıya doğru sıralanırlar.
  • wrap-reverse: Item’lar gerektiğinde alt satırlara aşağıdan yukarıya doğru sıralanırlar.
flex-wrap: nowrap
flex-wrap: wrap
flex-wrap: wrap-reverse
Flex Flow

flex-flow aslında flex-direction ve flex-wrap özelliklerinin kısayoludur. Bu kısayol sayesinde, her iki özelliğin değerlerini bir arada kullanabilmekteyiz. Aşağıdaki iki tanım da aynı sonucu sağlayacaktır.

.flex-container {
    flex-direction: column;
    flex-wrap: wrap;
}

.flex-container {
    flex-flow: column wrap;
}
Justify Content

Item’lerin yataydaki pozisyonlarını (positional alignment) ayarlamak için bu özellikten faydalanırız.

  • flex-start: Positional alignment. Item’ları sola dayalı ve soldan sağa hizalar. Varsayılan seçenektir.
  • flex-end: Positional alignment. Item’lar sağa dayalı (bitiş noktası) olarak hizalanır.
  • center: Positional alignment. Item’lar ortalanır.
  • space-between: Distributed alignment. İlk item sola, son item ise sağa dayalıdır. Diğer item’lar ise ortalanır.
  • space-around: Distributed alignment. İlk ve son item dışındaki tüm item’ların arasında eşit boşluk olacak şekilde hizalanır.
  • space-evenly: Distributed alignment. Tüm item’ların arasında aynı eşit boşluk olacak şekilde hizalanır.
.flex-container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
justify-content: space-evenly

Ek bir not, justify-content positional alignment değeri olarak start, end, left ve right seçeneklerini de alabilir. Normal alignment için normal, distributed alignment için stretch, overflow alignment için safe center ve unsafe center, son olarak da global values olarak inherit, initial ve unset değerleri alabilir. Bu özelliklerin dışında baseline alignment değer alamaz3.

Align Items

Item’lerin dikeydeki pozisyonlarını ayarlamak için bu özellikten faydalanırız.

  • stretch: Basic keywords. Hizalama yapmaz, item’ların yüksekliklerini container’a göre uzatır. Varsayılan seçenektir.
  • flex-start: Positional alignment. Item’ları üst çizgiye doğru hizalar.
  • flex-end: Positional alignment. Item’ları alt çizgiye doğru hizalar.
  • center: Positional alignment. Item’ları orta çizgide hizalar.
  • baseline: Baseline alignment. Item’ları container’ın taban çizgisine (baseline) göre hizalar.
.flex-container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}
align-items: stretch
align-items: flex-start
align-items: flex-end
align-items: center
align-items: baseline

align-items yukarıdaki tanımların yanı sıra bir kaç tanım daha alabilmekte4.

Align Content

Flex container ile ilgili son özelliğimiz align-content. Bu özellik sayesinde, çok satırlı yapılarda item’ların dikey olarak hizalandırılmasını sağlayabiliriz.

  • stretch: Item’ları hizalamaz, ancak yüksekliklerini uzatır. Varsayılan seçenektir.
  • flex-start: Item’ları dikey eksende, üst çizgiye göre hizalar.
  • flex-end: Item’ları dikey eksende alt çizgiye göre hizalar.
  • center: Item’ları dikey eksende orta çizgiye göre hizalar.
  • space-between: İlk satıdaki item’ları üst çizgiye, son satırdaki item’ları ise alt çizgiye hizalar. Kalan item’lar ise ortalanır.
  • space-evenly: Item’lar satırlar araları eşit boşluklarda olacak şekilde dikey eksende ortalanır.
.flex-container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-evenly;
}
align-content: stretch
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-evenly

Evet, Flexbox Layout Module elementi olan flex container ile ilgili özellikler, tanımlar ve örnekler bu kadar. Bir sonraki yazıda container içerisinde yer alan flex item’ları nasıl sıralayabileceğimize değineceğim. Yukarıdaki örnekleri kendiniz denemek isterseniz örneğin Codepen sayfasını inceleyebilirsiniz.


Kaynakça