CSS · Flexbox ile yan yana dizmek — videolu atölye

Flexbox ile yan yana dizmek

Flexbox ile bir satırın hizasını ve dar ekranda sarılmasını yönetmek.

Kavramı kur

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.

Neden böyle çalışıyor?

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.

Çalışma sırası

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.

İkinci örnek · 1

display:flex yalnızca doğrudan çocukların yerleşimini düzenler. Kodun tamamı yazılı derste bulunur.

<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>

Beklenen sonucu oku

align-items:center farklı yükseklikte öğeleri çapraz eksende ortalar.

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

Bir değeri sen değiştir

Üç kartı yan yana diz ve aralarına gap ekle. Bir kartın metnini uzat; align-items değerlerini karşılaştır.

Hata nereden gelir?

flex kuralını kapsayıcı yerine çocuklara veya tersine koymak beklenen etkiyi vermez; görevleri ayır.

Kendi çözümünü kur

Ekranı daralt; flex-wrap kapalıyken ve açıkken farkı gözlemle. flex:1 1 160px esneme, küçülme ve başlangıç boyutunu tek kuralda belirtir.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<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>

Kendini kontrol et

justify-content varsayılan yatay flex düzeninde hangi ekseni yönetir? Yanıt: Ana ekseni, yani varsayılan düzende yatay dağılımı yönetir.

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