Flexbox ile yan yana dizmek

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

Flexbox, bir kapsayıcının doğrudan çocuklarını tek ana eksen üzerinde düzenler. display:flex verdiğin öğe kapsayıcıdır; onun çocukları flex öğeleri olur. Ana eksen varsayılan olarak yataydır. justify-content ana eksen boyunca dağılımı, align-items ona dik eksende hizalamayı kontrol eder.

Birden çok kartı yan yana dizdiğinde toplam genişlik dar ekrana sığmayabilir. flex-wrap:wrap yeni satıra geçmeye izin verir; gap öğeler arasındaki düzenli boşluğu oluşturur. Her öğeye ayrı margin yazmak yerine kapsayıcıda gap kullanmak ilk ve son öğe boşluklarını daha anlaşılır yönetir.

Bir satırda uzun metin olması, beklemediğin minimum genişlikler doğurabilir. Flex öğelerinde min-width:0 veya uzun kelimeler için uygun kırılma kuralı gerekebilir. Önce hangi öğenin genişlediğini ölç; sonra sadece o öğeyi düzelt. Her kutuya rastgele width vermek esnek yerleşimin amacını bozar.

İlk örneği oku ve dene

<style>
  .menu {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
  .menu a {
    background-color: #6366f1;
    color: white;
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
  }
</style>

<nav class="menu">
  <a href="#">Ana Sayfa</a>
  <a href="#">Diller</a>
  <a href="#">Araçlar</a>
</nav>

Ortada yan yana duran, yuvarlak köşeli üç mor menü butonu görünür.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. display:flex yalnızca doğrudan çocukların yerleşimini düzenler.
2. gap çocuklar arasındaki boşluktur; dış kenar boşluğu değildir.
3. flex-wrap satır yetmediğinde öğeleri aşağı taşır.
4. align-items:center farklı yükseklikte öğeleri çapraz eksende ortalar.

<style>
.satir { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.kart { flex:1 1 160px; min-width:0; padding:16px; background:#eef2ff; }
</style>
<div class="satir"><div class="kart">HTML</div><div class="kart">CSS</div><div class="kart">JavaScript</div></div>

Geniş ekranda yan yana, dar ekranda saran üç kart.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. Üç kartı yan yana diz ve aralarına gap ekle.
2. Bir kartın metnini uzat; align-items değerlerini karşılaştır.
3. Ekranı daralt; flex-wrap kapalıyken ve açıkken farkı gözlemle.

<style>.grup{display:flex;flex-wrap:wrap;gap:10px}.oge{flex:1 1 140px;min-width:0;padding:14px;background:#e0f2fe}</style>
<div class="grup"><div class="oge">Bir</div><div class="oge">İki</div></div>

İki esnek öğe; alan azaldığında yeni satıra geçebilir.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. flex kuralını kapsayıcı yerine çocuklara veya tersine koymak beklenen etkiyi vermez; görevleri ayır.
2. Sabit genişlikleri padding ile toplarken box-sizing kuralını unutma.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

justify-content varsayılan yatay flex düzeninde hangi ekseni yönetir?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.