Ders 11 – Flexbox ile Sayfa Düzeni

0. Flexbox’tan Önce: Basit Bir Kutu Nasıl Yapılır?

Flexbox, kutuları hizalama sistemidir. Yani önce elimizde kutu olması gerekir. Bunun için en sık kullanılan etiket <div>’dir.

<div class="kutu-alani">
  <div class="kutu">Merhaba! Ben bir kutuyum.</div>
  <div class="kutu">Merhaba! Ben bir kutuyum.</div>
  <div class="kutu">Merhaba! Ben bir kutuyum.</div>
</div>

Şimdi bu kutuya biraz CSS ekleyelim:

.kutu {
  background-color: #22f2a2;
  color: #000;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Şimdilik sadece kutu alanını hazırlıyoruz, 
   flex özelliğini bir sonraki bölümde vereceğiz. */
.kutu-alani {
  margin-bottom: 20px;
}

Artık sayfanda kenarları yuvarlatılmış, içi dolgulu basit üç kutun var. Flexbox ile yan yana dizeceksin.

1. Flexbox Nedir?

Flexbox, bir kapsayıcı (parent) içindeki kutuları (child) düzenlemeye yarayan bir CSS düzen (layout) modelidir. Kapsayıcıya sadece display: flex; yazman yeterlidir.

.kutu-alani {
  display: flex;
}

Bu koddan sonra .kutu-alani içindeki tüm elemanlar “esnek kutu” gibi davranır ve yan yana dizilmeye çalışır.

2. Yön Belirleme: flex-direction

Flex kutuların yatay mı dikey mi dizileceğini flex-direction ile belirleriz:

• row → Yatay (soldan sağa) – varsayılan
• column → Dikey (üstten alta)

.kutu-alani {
  display: flex;
  flex-direction: row;
}

Eğer flex-direction: column; yapsaydık bu kutular alt alta dizilecekti.

3. Yatay Hizalama: justify-content

justify-content, kutuların yatay eksende (satırda) nasıl hizalanacağını belirler:

• flex-start → Sola yaslar
• center → Ortalar
• flex-end → Sağa yaslar
• space-between → İlk kutu en sola, son kutu en sağa; araları eşit boşluk

.kutu-alani {
  display: flex;
  justify-content: center;
}

Bu örnekte kutular yatayda ortalanır.

4. Dikey Hizalama: align-items

align-items, kutuların dikey eksendeki hizalamasını ayarlar. Özellikle yükseklikleri farklı kutuların üstte, ortada veya altta durmasını kontrol eder.

• flex-start → Üste hizalar
• center → Ortaya hizalar
• flex-end → Alta hizalar

.kutu-alani {
  display: flex;
  align-items: center;
}

5. Kutular Arası Boşluk: gap

Daha önce margin ile kutulara dış boşluk vermiştin. Flexbox’ta kutuların arasında boşluk bırakmak için gap özelliği çok pratiktir.

.kutu-alani {
  display: flex;
  gap: 20px;
}

6. Mini Görev – Flex Kart Tasarımı

Şimdi öğrendiğin özellikleri kullanarak yan yana kartlardan oluşan küçük bir bölüm tasarla:

1. flex-kartlar.html adında yeni bir HTML dosyası oluştur.
2. Sayfaya <div class="kart-alani"> ekle ve içine 3 tane <div class="kart"> yerleştir.
3. Her kartta başlık ve kısa bir paragraf olsun (örneğin: Ders 9, Ders 10, Ders 11 özeti).
4. .kart-alani için: display:flex;, gap:20px;, isteğe bağlı justify-content:center; ekle.
5. .kart için arka plan rengi, padding, border-radius vererek şık bir görünüm oluştur.
6. Değerlerle oynayarak kutuların nasıl hareket ettiğini gözlemle.

Yaptığın tasarımın ekran görüntüsünü alıp öğretmeninle paylaşabilirsin. Son derste bu bilgileri kullanarak tam bir kişisel web sitesi projesi yapacaksın.

Kaynaklar

• MDN Web Docs – CSS Flexbox
• Yeşil Bilişim: HTML & CSS önceki ders notların