CSS ile Sayfa Düzeni: Flexbox Temelleri

Bu, sekiz derslik Web Geliştirme Temelleri: HTML, CSS ve JavaScript ile İlk Web Siteniz kursunun altıncı dersidir. Önceki derste CSS ile renkleri, yazı tiplerini ve kutu modelini (padding, margin, border) kullanarak öğeleri biçimlendirmiştiniz. Bu derste ise öğeleri yan yana, ortalanmış ve düzenli şekilde yerleştirmeyi sağlayan Flexbox düzen sistemini öğreneceksiniz. Bir sonraki derste ise sayfanızı farklı ekran boyutlarına uyumlu hale getiren duyarlı (responsive) tasarım tekniklerine geçeceksiniz; bu yüzden Flexbox'ı iyi kavramak önemlidir.

Bu derste ne yapacağız?

Hedef: Flexbox'ın temel mantığını anlayacak, bir kapsayıcıyı (container) esnek düzen haline getirecek ve öğeleri yatayda-dikeyde hizalayarak basit bir navigasyon menüsü tasarlayacaksınız.

Ön koşul: HTML etiketlerini yazabiliyor olmanız, CSS seçicilerini (class, id) kullanabilmeniz ve kutu modelini (padding, margin) bilmeniz beklenir. Metin editörü (örneğin Not Defteri veya benzeri bir kod editörü) ve bir tarayıcı yeterlidir.

Kavram

Normalde HTML'deki div, p gibi blok öğeler alt alta dizilir; her biri kendi satırını kaplar. Flexbox devreye girdiğinde bu öğeleri yan yana, ortada, sağa yaslanmış veya aralarında boşluk bırakılmış şekilde düzenleyebilirsiniz.

Günlük hayattan bir benzetme yapalım: Bir kitap rafını düşünün. Kitapları rafa dikey olarak (sırt sırta, alt alta) da dizebilirsiniz, yatay olarak (yan yana) da. Flexbox size "bu rafta kitapları nasıl dizeceğim: yan yana mı, ortalayarak mı, aralarında eşit boşluk bırakarak mı?" sorusunun cevabını verme gücü sağlar. Rafın kendisine flex container (esnek kapsayıcı), içindeki her kitaba ise flex item (esnek öğe) denir.

Flexbox'ta iki ana eksen vardır: ana eksen (main axis) ve çapraz eksen (cross axis). Varsayılan olarak ana eksen yataydır (soldan sağa), çapraz eksen ise dikeydir. Öğeleri ana eksende hizalamak için justify-content, çapraz eksende hizalamak için align-items özelliklerini kullanırsınız.

Adım adım uygulama

Önceki derslerde oluşturduğunuz proje klasörünüzü açın. İçinde bir index.html ve bir de style.css dosyanız olduğunu varsayıyoruz. Eğer yoksa, aynı klasörde bu iki dosyayı oluşturun.
index.html dosyasını açın ve <body> etiketinin içine, sayfanın en üstüne gelecek şekilde aşağıdaki navigasyon menüsü kodunu ekleyin:
```
<nav class="menu">
  <a href="#">Anasayfa</a>
  <a href="#">Hakkımızda</a>
  <a href="#">Hizmetler</a>
  <a href="#">İletişim</a>
</nav>
```
Burada <nav> etiketi menümüzün kapsayıcısı (flex container) olacak, içindeki dört adet <a> bağlantı öğesi ise flex item'lar olacak.
Dosyayı kaydedin ve tarayıcıda açtığınızda bağlantıların şu an alt alta değil, zaten yan yana göründüğünü fark edebilirsiniz; bunun nedeni <a> etiketinin doğası gereği satır içi (inline) bir öğe olmasıdır. Ancak aralarında boşluk düzeni yoktur ve hizalama kontrolümüz yoktur. Şimdi Flexbox ile bunu düzenli hale getireceğiz.
style.css dosyanızı açın ve aşağıdaki kodu ekleyin:
```
.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background-color: #2c3e50;
  padding: 15px;
}
```
Şimdi bu satırların her birinin ne işe yaradığını açıklayalım:
- display: flex; — .menu class'ına sahip <nav> öğesini bir flex container'a dönüştürür. İçindeki tüm doğrudan çocuk öğeler (dört <a> etiketi) artık flex item olur ve otomatik olarak yan yana dizilir.
- justify-content: center; — Öğeleri ana eksende (yatayda) ortalar. Menünüz sayfanın tam ortasında görünecektir.
- align-items: center; — Öğeleri çapraz eksende (dikeyde) ortalar. Menü öğelerinin yükseklikleri farklı olsa bile hepsi dikeyde hizalı görünür.
- gap: 20px; — Flex item'lar arasına 20 piksellik eşit boşluk koyar. Ayrı ayrı margin vermekle uğraşmanıza gerek kalmaz.
- background-color: #2c3e50; ve padding: 15px; — Menüye koyu bir arka plan rengi ve kapsayıcı içinden iç boşluk vererek görsel olarak belirgin bir çubuk hâline getirir.
Bağlantıların metin rengini de düzenlemek için aynı dosyaya şu kuralı ekleyin:
```
.menu a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}
```
Bu, bağlantıların varsayılan mavi rengini ve altındaki çizgiyi kaldırıp beyaz ve kalın yazı yapar; böylece koyu arka plan üzerinde okunaklı görünür.
Dosyayı kaydedin, tarayıcınıza dönüp sayfayı yenileyin (F5 tuşuna basarak veya adres çubuğundaki yenile simgesine tıklayarak). Menünüzün artık koyu bir şerit içinde, ortalanmış ve aralarında eşit boşluk bulunan dört bağlantı olarak göründüğünü görmelisiniz.
Şimdi justify-content değerini değiştirerek farkı deneyimleyin. center yerine space-between yazıp kaydedin ve sayfayı yenileyin:
```
justify-content: space-between;
```
Bu değer, ilk öğeyi en sola, son öğeyi en sağa yaslar ve aradaki boşluğu eşit dağıtır. İki değeri de deneyip aradaki görsel farkı gözlemleyin, sonra hangisini beğendiyseniz onunla devam edin.

Sık karşılaşılan sorunlar

Sorun	Olası neden	Çözüm
Menü öğeleri hâlâ alt alta duruyor	`display: flex;` satırı eksik veya yanlış class'a yazılmış	`style.css` dosyasında `.menu` seçicisinin doğru yazıldığından ve `display: flex;` satırının bulunduğundan emin olun
CSS değişiklikleri sayfada görünmüyor	Dosya kaydedilmemiş veya tarayıcı önbelleği eski sürümü gösteriyor	Ctrl+S ile kaydedin, ardından tarayıcıda Ctrl+F5 ile sayfayı zorla yenileyin
`justify-content` hiçbir etki yapmıyor	Kapsayıcıda yeterli boş alan yok veya `display: flex;` tanımlı değil	Önce `display: flex;` satırının var olduğunu doğrulayın; kapsayıcının genişliğinin öğelerden büyük olduğundan emin olun
Bağlantılar arasında boşluk yok	`gap` özelliği eksik veya yazım hatası var	`gap: 20px;` satırını `.menu` kuralı içine ekleyin, noktalı virgülü unutmayın
CSS dosyası hiç uygulanmıyor	HTML dosyasında CSS bağlantısı eksik veya yanlış	`<head>` içinde `<link rel="stylesheet" href="style.css">` satırının bulunduğunu ve dosya adının tam eşleştiğini kontrol edin

Mini görev

Şimdi öğrendiklerinizi pekiştirmek için kendi başınıza küçük bir uygulama yapın: Sayfanızın içine, menünün altına üç adet "kart" içeren yeni bir bölüm ekleyin (örneğin üç hizmet veya üç ürün tanıtımı). Bu kartları Flexbox kullanarak yan yana, aralarında eşit boşlukla ve dikeyde ortalanmış şekilde diziniz.

İpucu olarak şu HTML yapısını kullanabilirsiniz:

<div class="kart-alani">
  <div class="kart">Kart 1</div>
  <div class="kart">Kart 2</div>
  <div class="kart">Kart 3</div>
</div>

Kontrol listesi:

.kart-alani class'ına display: flex; eklediniz mi?
Kartlar arasında gap ile boşluk bıraktınız mı?
justify-content ile kartları yatayda hizaladınız mı (ortada, aralıklı veya başlangıçta)?
Her kartın görünür olması için kısa bir padding ve arka plan rengi verdiniz mi?
Sayfayı tarayıcıda yenileyip sonucu kontrol ettiniz mi?

Kendini sına

Bir öğeyi flex container hâline getirmek için hangi CSS özelliği kullanılır?
justify-content: center; öğeleri hangi eksende ortalar?
Flex item'lar arasına eşit boşluk bırakmak için hangi özellik kullanılır?
align-items özelliği hangi ekseni etkiler?
justify-content: space-between; özelliği öğeleri nasıl yerleştirir?

Cevaplar

display: flex;
Ana ekseni (varsayılan olarak yatay eksen)
gap
Çapraz ekseni (varsayılan olarak dikey eksen)
İlk öğeyi en başa, son öğeyi en sona yaslar ve aradaki boşluğu öğeler arasında eşit şekilde dağıtır

Not: Tarayıcı ve editör arayüzleri sürüme göre küçük farklılıklar gösterebilir; menü adları veya düğme konumları kullandığınız sürümde biraz farklı olabilir.

Bu dersi kayıt olmadan izleyebilirsin. İlerlemeni kaydetmek, sertifika almak ve puan tablosuna girmek için ücretsiz üye ol: Kayıt Ol