Flexbox ve Grid

Bu dersin sonunda elemanları yan yana dizebilecek, aralarındaki boşlukları dağıtabilecek ve basit bir ızgara düzeni kurabileceksiniz.

Yan yana dizmek

Blok elemanlar alt alta dizilir. Onları yan yana getirmenin modern yolu Flexbox’tır. Kural basittir: display: flex değerini elemanların kendisine değil, onları saran kutuya yazarsınız. İçindeki elemanlar otomatik olarak yan yana gelir.

<div style="display: flex;">
  <div style="background-color: lightblue; padding: 12px;">Bir</div>
  <div style="background-color: lightgreen; padding: 12px;">İki</div>
  <div style="background-color: khaki; padding: 12px;">Üç</div>
</div>

Saran kutuya kapsayıcı, doğrudan içindeki elemanlara öğe denir.

gap: Öğelerin arası

Öğeler arasına boşluk koymanın en temiz yolu gap özelliğidir. Yalnızca öğelerin arasına boşluk koyar, kenarlara koymaz.

<div style="display: flex; gap: 16px;">
  <div style="background-color: lightblue; padding: 12px;">Bir</div>
  <div style="background-color: lightgreen; padding: 12px;">İki</div>
  <div style="background-color: khaki; padding: 12px;">Üç</div>
</div>

flex-direction: Yön

Öğelerin hangi yönde dizileceğini belirler:

• row Varsayılan. Soldan sağa.
• column Yukarıdan aşağıya.
• row-reverse ve column-reverse Ters yönde.

<div style="display: flex; flex-direction: column; gap: 8px; width: 160px;">
  <div style="background-color: lightblue; padding: 8px;">Bir</div>
  <div style="background-color: lightgreen; padding: 8px;">İki</div>
</div>

justify-content: Ana eksende dağıtmak

row yönünde yatay dağılımı belirler. Değerleri önizlemede değiştirin:

• flex-start Başa toplar.
• center Ortaya toplar.
• flex-end Sona toplar.
• space-between İlk ve son öğeyi kenarlara yaslar, kalan boşluğu arasına dağıtır.
• space-around Her öğenin iki yanına eşit boşluk koyar.
• space-evenly Bütün boşlukları eşitler.

<div style="display: flex; justify-content: space-between; background-color: whitesmoke; padding: 8px;">
  <div style="background-color: lightblue; padding: 12px;">Bir</div>
  <div style="background-color: lightgreen; padding: 12px;">İki</div>
  <div style="background-color: khaki; padding: 12px;">Üç</div>
</div>

align-items: Çapraz eksende hizalamak

row yönünde dikey hizayı belirler. Etkisini görmek için kapsayıcının öğelerden yüksek olması gerekir.

• stretch Varsayılan. Öğeler kapsayıcının yüksekliğine uzar.
• flex-start Üste toplar.
• center Ortalar.
• flex-end Alta toplar.
• baseline Yazıların taban çizgisini aynı hizaya getirir.

<div style="display: flex; align-items: center; gap: 8px; height: 120px; background-color: whitesmoke;">
  <div style="background-color: lightblue; padding: 12px;">Kısa</div>
  <div style="background-color: lightgreen; padding: 32px 12px;">Uzun</div>
</div>

Yıllarca zor bir iş olarak bilinen “bir şeyi tam ortalamak” Flexbox ile iki satırdır:

<div style="display: flex; justify-content: center; align-items: center; height: 140px; background-color: midnightblue;">
  <p style="color: white; margin: 0;">Tam ortadayım</p>
</div>

flex-wrap: Sığmayınca alt satıra geçmek

Öğeler varsayılan olarak tek satırda kalır ve sığmazlarsa küçülür. flex-wrap: wrap yazarsanız alt satıra geçerler.

<div style="display: flex; flex-wrap: wrap; gap: 8px;">
  <div style="width: 160px; background-color: lightblue; padding: 8px;">Bir</div>
  <div style="width: 160px; background-color: lightgreen; padding: 8px;">İki</div>
  <div style="width: 160px; background-color: khaki; padding: 8px;">Üç</div>
  <div style="width: 160px; background-color: lightpink; padding: 8px;">Dört</div>
</div>

Öğelerin kendi ayarları

Şimdiye kadarkiler kapsayıcıya yazıldı. Şunlar ise öğelere yazılır:

• flex: 1 Öğe kalan boşluğu doldurur. İki öğe de flex: 1 ise boşluğu eşit paylaşır. flex: 2 olan, iki kat pay alır.
• align-self Yalnızca o öğenin dikey hizasını değiştirir.
• order Öğenin görsel sırasını değiştirir. Küçük sayı önce gelir.

<div style="display: flex; gap: 8px;">
  <div style="width: 120px; background-color: lightblue; padding: 12px;">Sabit 120px</div>
  <div style="flex: 1; background-color: lightgreen; padding: 12px;">flex: 1 (kalanı doldurur)</div>
</div>

Grid: Satır ve sütunlar

Flexbox tek yönde dizmek için, Grid ise iki yönde, yani hem satır hem sütun içeren düzenler içindir. Yine kapsayıcıya yazılır. grid-template-columns sütunları tanımlar.

fr birimi kalan alanın bir payıdır. 1fr 2fr yazarsanız ikinci sütun birincinin iki katı genişlikte olur. Aynı değeri tekrar etmek için repeat kullanılır.

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;">
  <div style="background-color: lightblue; padding: 12px;">1</div>
  <div style="background-color: lightgreen; padding: 12px;">2</div>
  <div style="background-color: khaki; padding: 12px;">3</div>
  <div style="background-color: lightpink; padding: 12px;">4</div>
  <div style="background-color: lavender; padding: 12px;">5</div>
</div>

Bir öğe birden çok sütun kaplayabilir. Sütunlar sabit ve esnek değerlerin karışımı da olabilir:

<div style="display: grid; grid-template-columns: 120px 1fr; gap: 8px;">
  <header style="grid-column: span 2; background-color: lightblue; padding: 12px;">Üst bölüm, iki sütun kaplıyor</header>
  <nav style="background-color: lightgreen; padding: 12px;">Menü</nav>
  <main style="background-color: khaki; padding: 12px;">Ana içerik</main>
</div>

Hangisini seçeceğiniz konusunda basit bir kural: Bir satır veya sütun dizecekseniz Flexbox, tablo benzeri bir yerleşim kuracaksanız Grid kullanın. Verinin kendisi tablo ise table etiketini kullanın.

<nav style="display: flex; justify-content: space-between; padding: 12px;">
  <span>Logo</span>
  <span>Menü</span>
</nav>

<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 8px;">
  <div>Sol</div>
  <div>Sağ</div>
</div>

Bu derste öğrendikleriniz

• display: flex kapsayıcıya yazılır, içindeki öğeler yan yana gelir.
• justify-content ana eksende, align-items çapraz eksende hizalar. gap aralarına boşluk koyar.
• flex-wrap: wrap taşan öğeleri alt satıra alır, flex: 1 kalan alanı doldurur.
• display: grid ve grid-template-columns satır ve sütunlu düzenler kurar.