CSS Flexbox Nedir? Flex Container Özellikleri Nelerdir?

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 (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) 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 (division ve/veya 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/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 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 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 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.

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

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

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

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

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.