CSS

CSS Flexbox Nedir? Flex Container Özellikleri Nelerdir?

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 ...
GÖRSEL
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
Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.