CSS’de “Flexbox” Kullanımı

Web tasarımında elemanların düzgün bir şekilde hizalanması ya da sayfa düzeninin oturması bazen gerçekten zor olabilir, değil mi? Neyse ki, CSS dünyası bize bu konuda büyük kolaylıklar sunuyor. Bugün sizlerle bu kolaylıklardan biri olan Flexbox hakkında konuşacağız. Bu araç sayesinde web sayfalarındaki konumlandırma sorunlarını çözmek daha hızlı bir hale geleceğini garanti edebilirim.

“Flexbox” Nedir?

“Flexbox” (Flexible Box Layout), web sayfalarındaki elemanları esnek ve düzenli bir şekilde hizalamayı sağlayan bir CSS aracıdır. Elemanları ortalamak, eşit aralıklarla dağıtmak ya da bir satıra sığmayan öğeleri kolayca düzenlemek gibi durumlar için ideal bir çözüm sunar ve temelinde iki önemli kavram bulunur:

A. Flex Container: Web sayfasında diğer elemanları (çocuk öğeleri) barındıran ana kapsayıcıdır. Bu kapsayıcı, içindeki öğelerin hizalanma, boyutlandırılma ve yerleşim şekillerini belirler.

B. Flex Items: “Flex container“ın içinde yer alan, doğrudan ona bağlı olan çocuk elemanlardır. Yani, kapsayıcıya doğrudan bağlı her öğe bir “flex item” olarak adlandırılır. Haliyle sadece “flex container” içinde var olabilir. Bu öğeler, “flex container” tarafından belirlenen kurallara göre şekillenir.

Bu iki kavramı doğru anlamak neden önemlidir? Çünkü “Flexbox“ta bazı CSS özellikleri yalnızca “flex container” üzerinde, bazıları ise yalnızca “flex items” için geçerlidir. Bu ayrım, “Flexbox” ile çalışırken doğru hizalama ve düzenlemeler yapabilmek için oldukça önemlidir.

“Flex Container” Nasıl Tanımlanır?

Bir elemanı “flex container” haline getirmek için display özelliğini flex ya da inline-flex olarak ayarlamanız yeterlidir. Bu basit adımla, kapsayıcınız artık esnek bir düzene kavuşmuş olur ve içindeki öğeleri kolayca hizalamaya başlayabilirsiniz.

Eğer bir HTML öğesini “flex item” gibi davranmasını istiyorsanız mutlaka bir üst kapsayıcıyı “flex container” olarak tanımlamanız gerekir. Bu olmadan “Flexbox”ın işlevselliği devreye girmez. O halde bu iki kavramı daha yakından inceleyelim.

A. “Flex Container” Özellikleri

1. justify-content (Yatay Hizalama)

• Ne İşe Yarar: Öğeleri yatay eksende hizalar.
• Değerleri:
  • flex-start (varsayılan): Öğeler sol tarafa hizalanır.
  • flex-end: Öğeler sağ tarafa hizalanır.
  • center: Öğeler ortalanır.
  • space-between: İlk öğe sola, son öğe sağa yaslanır; aradaki boşluklar eşit olur.
  • space-around: Tüm öğeler arasında eşit miktarda boşluk bırakılır.
  • space-evenly: Öğeler arasında ve kenarlarda eşit miktarda boşluk bırakılır.

2. align-items (Dikey Hizalama)

• Ne İşe Yarar: Öğeleri dikey eksende hizalar.
• Değerleri:
  • stretch (varsayılan): Öğeler, kapsayıcının yüksekliğini dolduracak şekilde esner.
  • flex-start: Öğeler üst tarafa hizalanır.
  • flex-end: Öğeler alt tarafa hizalanır.
  • center: Öğeler dikey eksende ortalanır.
  • baseline: Öğeler yazı çizgisine hizalanır.

3. flex-wrap (Satır Kırılması)

• Ne İşe Yarar: Öğelerin bir satıra sığıp sığmayacağını kontrol eder.
• Değerleri:
  • nowrap (varsayılan): Tüm öğeler tek bir satıra yerleştirilir.
  • wrap: Öğeler bir satıra sığmazsa alt satıra taşınır.
  • wrap-reverse: Öğeler alt satıra taşınır ancak ters yönde hizalanır.

B. “Flex Items” Özellikleri

1. flex-grow (Büyüme Oranı)

• Ne İşe Yarar: Öğelerin kapsayıcı içindeki boş alanı doldurma oranını belirler.
• Değerleri:
  • 0 (varsayılan): Öğe büyümez.
  • Pozitif bir sayı (1, 2, vb.): Boş alan öğeler arasında belirtilen oranlarda paylaştırılır.

2. flex-shrink (Küçülme Oranı)

• Ne İşe Yarar: Öğelerin, kapsayıcının boyutuna uyması için küçülme oranını belirler.
• Değerleri:
  • 1 (varsayılan): Öğeler küçülür.
  • 0: Öğe küçülmez.
  • Pozitif bir sayı (2, 3, vb.): Belirtilen oranda küçülme uygulanır.

3. align-self (Bireysel Hizalama)

• Ne İşe Yarar: Tek bir öğeyi dikey eksende diğerlerinden farklı hizalamayı sağlar.
• Değerleri:
  • auto (varsayılan): Kapsayıcının align-items değerini kullanır.
  • flex-start: Üst tarafa hizalanır.
  • flex-end: Alt tarafa hizalanır.
  • center: Ortalanır.
  • baseline: Yazı çizgisine hizalanır.
  • stretch: Kapsayıcının yüksekliğini doldurur.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Örnek</title>
  <style>
    /* Flex Container'ın tanımlanması */
    .flex-container {
      display: flex; /* Kapsayıcıyı Flex Container yapar */
      justify-content: space-between; /* Yatay eksende öğeler arasında eşit boşluk bırakır */
      align-items: center; /* Dikey eksende öğeleri ortalar */
      flex-wrap: wrap; /* Öğeler bir satıra sığmazsa alt satıra geçer */
      height: 200px; /* Dikey hizalamayı görmek için yükseklik verildi */
      background-color: #f0f0f0; /* Kapsayıcıyı görselleştirmek için arka plan */
      padding: 10px;
    }

    /* Flex Items'ın özellikleri */
    .flex-item {
      flex-grow: 1; /* Her öğe, boş alanı eşit oranda doldurur */
      flex-shrink: 1; /* Kapsayıcı daraldığında öğeler eşit oranda küçülür */
      flex-basis: 150px; /* Öğelerin başlangıç genişliği 150px olur */
      text-align: center; /* Metni ortalar */
      padding: 10px;
      background-color: #add8e6;
      margin: 5px;
      border: 1px solid #000;
    }

    /* align-self ile bir öğenin hizalanması */
    .flex-item.special {
      align-self: flex-end; /* Bu öğe, diğerlerinden bağımsız olarak alt tarafa hizalanır */
      background-color: #ffcccb; /* Görselleştirmek için farklı renk */
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <!-- Flex Items -->
    <div class="flex-item">Öğe 1</div>
    <div class="flex-item">Öğe 2</div>
    <div class="flex-item">Öğe 3</div>
    <div class="flex-item special">Özel Öğe</div> <!-- align-self uygulanmış -->
    <div class="flex-item">Öğe 4</div>
  </div>
</body>
</html>

“Flexbox” Hangi HTML Elementleri için Tanımlanır?

Herhangi bir HTML elementi, “Flex Container” haline getirilebilir. “Flex Container”lar, özellikle ekran boyutlarına duyarlı (responsive) web siteleri tasarlarken işinizi oldukça kolaylaştırır. Neden mi? Çünkü bu kapsayıcıların içinde yer alan “çocuk öğeler” (child elements), kapsayıcının boyutuna ve konumuna bağlı olarak otomatik şekilde yeniden boyutlanır ve hizalanır.

Bir elementi “Flex Container” yapmak için CSS’de display özelliğini (property) flex olarak ayarlamanız yeterlidir. Örneğin:

div.container {
  display: flex;
}

Bu kodla, container sınıfına sahip tüm div elementleri artık birer “Flex Container” olur. Peki bu ne anlama geliyor?

• Eğer bu kapsayıcıların içinde başka öğeler varsa, bu öğeler “Flex Items” olarak adlandırılır.
• “Flex Container” haline gelen bir element, hala bir “block-level element” gibi davranır, yani başka elementler onunla aynı satırda yer almaz.

Ama işin asıl güzelliği çocuk öğelerde başlar! Normalde, HTML’de her çocuk öğe bir sonraki satırdan başlar. Ancak bir “Flex Container” içindeki çocuk öğeler:

• Yeni satırdan başlamaz,
• “Flex Container”ın belirlediğiniz özelliklerine göre hizalanır ve yerleştirilir.

Bu yapı, özellikle karmaşık düzenlerde öğeleri hizalama, boşluk bırakma ya da farklı ekran boyutlarına uygun tasarım yapma gibi işleri inanılmaz kolay hale getirir. Artık, “Flex Container” ve “Flex Items” arasındaki bu ilişkiyi daha yakından inceleyebiliriz!

Varsayılan olarak, bir HTML öğesine display: flex uyguladığınızda, bu öğe blok seviyesinde (block-level element) kalır. Yani başka elementler aynı satırda yer almaz. Peki, aynı anda birden fazla “Flex Container“ı yan yana hizalamak istersek ne yaparız?

Bu durumda, CSS’de display: inline-flex değerini kullanabilirsiniz. Bu değer sayesinde, “Flex Container“ınız hem esnek (flexible) düzen avantajlarına sahip olur hem de satır içi bir öğe gibi davranır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex vs Inline-Flex</title>
  <style>
    /* Ortak Kapsayıcı Stili */
    .container {
      width: 200px; /* Kapsayıcı genişliği */
      height: 100px; /* Kapsayıcı yüksekliği */
      border: 2px solid #000; /* Kapsayıcı kenarlığı */
      margin: 10px; /* Kapsayıcılar arası boşluk */
      display: flex; /* Varsayılan olarak flex düzen */
      justify-content: center; /* İçeriği yatayda ortala */
      align-items: center; /* İçeriği dikeyde ortala */
      background-color: #add8e6; /* Hafif mavi arka plan */
    }

    /* Inline-Flex için stil */
    .inline-container {
      display: inline-flex; /* Kapsayıcı inline-flex olarak ayarlandı */
    }

    /* Çocuk öğelerin stili */
    .child {
      width: 50px; /* Çocuk öğe genişliği */
      height: 50px; /* Çocuk öğe yüksekliği */
      background-color: #ffcccb; /* Hafif kırmızı arka plan */
      border: 1px solid #000; /* Çocuk öğe kenarlığı */
    }
  </style>
</head>
<body>
  <h2>Display: Flex (Blok Seviyesi)</h2>
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>

  <h2>Display: Inline-Flex (Satır İçi)</h2>
  <div class="inline-container">
    <div class="container">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
    <div class="container">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>
</html>

Kodumuzdan ne öğrendik? Şöyle diyebiliriz:

1. Display: Flex
   • Kapsayıcılar blok seviyesindedir.
     • Her kapsayıcı yeni bir satırdan başlar.
     • Diğer kapsayıcılarla aynı satırı paylaşmaz.
2. Display: Inline-Flex
   • Kapsayıcılar satır içi davranır.
     • Yeterli alan varsa yan yana dizilir.
     • Alan yetersizse alt satıra geçer.