Modern web tasarımında menüleri aynı satırda hizalamak, kartları yan yana yerleştirmek veya bir butonu bulunduğu alanın ortasına getirmek sık karşılaşılan ihtiyaçlardır. CSS Flexbox (Flexible Box Layout), bu tür yerleşimleri oluşturmak için geliştirilmiş esnek bir CSS düzen sistemidir.
Bu Nizokka Akademi rehberinde display: flex, justify-content, align-items, flex-direction, flex-wrap ve gap özelliklerini uygulamalı olarak öğreneceğiz. Ayrıca responsive kart düzeni oluşturacak ve Flexbox kullanırken sık yapılan hataları inceleyeceğiz.
1. CSS Flexbox Nedir?
Flexbox, bir kapsayıcının içindeki öğeleri tek bir ana eksen boyunca yerleştirmeyi ve diğer eksende hizalamayı kolaylaştırır. Öğeler, mevcut alana göre büyüyebilir, küçülebilir veya bir sonraki satıra geçebilir.
Bir elementi Flexbox kapsayıcısına dönüştürmek için display: flex kullanılır:
.kapsayici {
display: flex;
}Bu kuralın uygulandığı element flex container, onun doğrudan çocukları ise flex item olarak adlandırılır. İç içe geçmiş torun elementler kendiliğinden flex item olmaz.
2. Flexbox'ta Ana Eksen ve Çapraz Eksen
Flexbox'ı anlamanın en önemli noktası iki eksendir:
- Main axis (Ana eksen): Öğelerin temel yerleşim yönüdür.
flex-directionile belirlenir. - Cross axis (Çapraz eksen): Ana eksene dik olan yöndür.
Varsayılan flex-direction: row durumunda yatay yazım düzenlerinde ana eksen genellikle yatay, çapraz eksen dikeydir. flex-direction: column kullanıldığında ana eksen dikey yöne geçer.
Akılda kalacak kural: justify-content ana eksende, align-items çapraz eksende hizalama yapar. Bu nedenle bu özellikleri ezberlerken yalnızca “yatay” ve “dikey” sözcüklerine bağlı kalmayın.
3. İlk Flexbox Örneğimiz
Üç kutuyu bir satırda göstermek için şu HTML kodunu kullanın:
<div class="kapsayici">
<div class="kutu">HTML</div>
<div class="kutu">CSS</div>
<div class="kutu">JavaScript</div>
</div>Ardından CSS dosyanıza şu kuralları ekleyin:
.kapsayici {
display: flex;
gap: 16px;
padding: 16px;
border: 1px solid #cbd5e1;
}
.kutu {
padding: 16px;
background-color: #dbeafe;
border-radius: 8px;
}Sonuçta üç kutu aynı flex kapsayıcısının doğrudan çocukları olduğu için ana eksende yan yana dizilir. gap ise öğeler arasında 16 piksel boşluk bırakır.
4. justify-content Nedir? Ana Eksende Hizalama
justify-content, öğeler yerleştirildikten sonra ana eksende kalan boş alanın nasıl dağıtılacağını belirler.
Sık kullanılan değerleri şöyledir:
| Değer | Görevi |
|---|---|
flex-start |
Öğeleri ana eksenin başlangıcına toplar. |
flex-end |
Öğeleri ana eksenin sonuna toplar. |
center |
Öğeleri ana eksende ortalar. |
space-between |
İlk ve son öğeyi uçlara yerleştirir, aradaki boşluğu dağıtır. |
space-around |
Her öğenin etrafına boşluk dağıtır. |
space-evenly |
Öğeler arasındaki ve dış kenarlardaki aralıkları eşit dağıtır. |
justify-content: space-between örneği
.ust-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}Bu tür bir yapı, solda logo ve sağda menü bağlantılarının bulunduğu üst çubuklar için kullanışlıdır.
Ancak dağıtılacak boş alan yoksa justify-content etkisi beklediğiniz kadar belirgin olmayabilir.
5. align-items Nedir? Çapraz Eksende Hizalama
align-items, flex öğelerini çapraz eksen boyunca hizalar.
Yaygın değerler:
stretch: Uygun durumlarda öğeleri çapraz eksende kullanılabilir alanı dolduracak şekilde uzatır.flex-start: Çapraz eksenin başlangıcına hizalar.flex-end: Çapraz eksenin sonuna hizalar.center: Çapraz eksende ortalar.baseline: Öğeleri metin taban çizgileri üzerinden hizalamaya çalışır.
Hem yatay hem dikey ortalama
.ortala {
display: flex;
justify-content: center;
align-items: center;
min-height: 240px;
border: 1px solid #cbd5e1;
}Varsayılan satır yönünde justify-content: center yatay, align-items: center dikey ortalama sağlar.
min-height, dikey hizalamanın fark edilebilmesi için kapsayıcıda yeterli alan oluşturur.
6. flex-direction: row ve column Arasındaki Fark
flex-direction, ana eksenin yönünü belirler:
.yatay {
display: flex;
flex-direction: row;
}
.dikey {
display: flex;
flex-direction: column;
}row, öğeleri satır yönünde; column ise sütun yönünde sıralar.
row-reverse ve column-reverse seçenekleri de vardır.
Dikkat: Yönü tersine çevirmek yalnızca görsel sırayı değiştirir; klavye ile gezinme ve ekran okuyucu sırası genellikle kaynak HTML sırasını izlemeye devam eder. Anlamlı içerik sırasını öncelikle HTML'de doğru kurun.
column kullanıldığında hizalama nasıl değişir?
.dikey-kapsayici {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-height: 300px;
}Bu örnekte justify-content artık dikey ana eksende etkilidir; align-items ise yatay çapraz eksende çalışır.
7. flex-wrap ile Alt Satıra Geçiş
Varsayılan flex-wrap: nowrap durumunda flex öğeleri tek satırda kalmaya çalışır.
Yeterli alan yoksa öğeler küçülebilir veya içerik taşabilir.
Birden fazla satıra izin vermek için flex-wrap: wrap kullanılır.
.etiket-listesi {
display: flex;
flex-wrap: wrap;
gap: 12px;
}Bu yöntem, kategori etiketleri veya farklı ekran genişliklerine uyum sağlaması gereken kart grupları için yararlıdır.
8. gap, row-gap ve column-gap
gap, flex öğeleri arasında düzenli boşluk oluşturur. Dış kenarlarda otomatik margin eklemez.
.kartlar {
display: flex;
flex-wrap: wrap;
gap: 20px;
}Satır ve sütun aralıklarını ayrı belirtmek de mümkündür:
.kartlar {
row-gap: 24px;
column-gap: 16px;
}Flex ve Grid düzenlerinde gap, öğelerin kendi margin değerleriyle tek tek uğraşmadan tutarlı aralıklar oluşturmayı kolaylaştırır.
9. flex-grow, flex-shrink ve flex-basis
Flexbox'ın esnek olmasını sağlayan üç temel özellik şunlardır:
flex-grow: Ana eksendeki pozitif boş alanın nasıl paylaştırılacağını belirler.flex-shrink: Alan yetersizse öğelerin ne ölçüde küçülebileceğini belirler.flex-basis: Esneklik hesaplaması başlamadan önce öğenin ana eksendeki başlangıç boyutunu belirler.
.sol-panel {
flex: 1 1 220px;
}
.ana-icerik {
flex: 2 1 400px;
min-width: 0;
}flex: 1 1 220px sırasıyla büyüme katsayısı, küçülme katsayısı ve başlangıç boyutunu bildirir.
Bu örnekte öğeler, alan müsait olduğunda farklı oranlarda genişleyebilir. Gerçek boyutlar minimum içerik ölçüleri, mevcut boşluk ve diğer CSS kurallarından da etkilenir.
İpucu: Uzun bağlantılar veya büyük kod blokları içeren esnek öğelerde min-width: 0, içerik nedeniyle oluşan beklenmedik yatay taşmaları azaltmaya yardımcı olabilir.
10. align-self ile Tek Bir Öğeyi Farklı Hizalama
align-items kapsayıcıdaki öğelere ortak hizalama verirken align-self tek bir flex öğesinin çapraz eksendeki hizalamasını değiştirebilir.
.satir {
display: flex;
align-items: center;
min-height: 160px;
}
.ozel-oge {
align-self: flex-start;
}Bir öğenin kendisine verilen align-self değeri, o öğe açısından kapsayıcının align-items değerini geçersiz kılabilir.
11. Mini Proje: Responsive Ders Kartları
Şimdi Nizokka Akademi için küçük bir ders listesi oluşturalım.
HTML'i index.html dosyanıza, CSS'i ise style.css dosyanıza ekleyin.
HTML kodu
<section class="dersler" aria-labelledby="ders-baslik">
<h2 id="ders-baslik">Popüler Dersler</h2>
<div class="ders-listesi">
<article class="ders-karti">
<h3>HTML Temelleri</h3>
<p>Web sayfası iskeletini öğrenin.</p>
<a href="/academy">Dersi incele</a>
</article>
<article class="ders-karti">
<h3>CSS Seçicileri</h3>
<p>Stil kurallarının mantığını kavrayın.</p>
<a href="/academy">Dersi incele</a>
</article>
<article class="ders-karti">
<h3>CSS Flexbox</h3>
<p>Esnek sayfa düzenleri oluşturun.</p>
<a href="/academy">Dersi incele</a>
</article>
</div>
</section>CSS kodu
*,
*::before,
*::after {
box-sizing: border-box;
}
.dersler {
max-width: 1100px;
margin: 40px auto;
padding: 0 16px;
}
.ders-listesi {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.ders-karti {
display: flex;
flex-direction: column;
flex: 1 1 260px;
min-width: 0;
padding: 24px;
border: 1px solid #cbd5e1;
border-radius: 14px;
background: #ffffff;
}
.ders-karti h3 {
margin: 0 0 12px;
}
.ders-karti p {
line-height: 1.6;
margin: 0 0 20px;
}
.ders-karti a {
margin-top: auto;
color: #1d4ed8;
font-weight: 700;
}
.ders-karti a:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 4px;
}Bu tasarımda flex-wrap: wrap kartların gerektiğinde alt satıra geçmesini sağlar.
flex: 1 1 260px kartlara esnek bir başlangıç genişliği verir.
Kartın içindeki margin-top: auto ise bağlantıyı, dikey eksende yeterli boşluk bulunduğunda kartın alt bölümüne iter.
Deneyin: Tarayıcı penceresini daraltarak kartların satır değiştirmesini izleyin. Ardından gap değerini 20px'ten 12px'e indirip sonucu karşılaştırın.
12. Flexbox ile Grid Arasındaki Fark
Flexbox genellikle tek boyutlu yerleşimlerde; menülerde, buton gruplarında, küçük bileşenlerde ve tek satır ya da sütun boyunca hizalamada çok etkilidir.
CSS Grid ise satır ve sütunları birlikte tasarlamanın önemli olduğu iki boyutlu düzenlerde avantajlıdır.
Bu kesin bir yasak değildir: her iki sistem de farklı durumlarda birlikte kullanılabilir.
13. Sık Yapılan Flexbox Hataları
justify-contentözelliğini her zaman yatay hizalama sanmak.- Eksenin
flex-directionile değiştiğini unutmak. align-items: centeryazıp kapsayıcıda hizalamayı fark ettirecek çapraz eksen alanı bulunmadığını gözden kaçırmak.- Öğelerin alt satıra geçmesini beklerken
flex-wrap: wrapeklememek. - İçerik yüzünden taşan kartlarda minimum boyutları kontrol etmemek.
orderveyarow-reversekullanarak görsel sırayı değiştirip klavye gezinme sırasını göz ardı etmek.align-contentilealign-itemsözelliklerini karıştırmak.
Not: align-content, birden fazla flex satırının çapraz eksende nasıl dağıtıldığını etkiler. Tek satırlı düzende genellikle beklenen etkiyi göstermez.
14. Sık Sorulan Sorular
justify-content ile align-items arasındaki fark nedir?
justify-content, ana eksendeki boş alanın dağıtımını; align-items ise öğelerin çapraz eksendeki hizalamasını yönetir.
Flexbox kullanmak için JavaScript gerekir mi?
Hayır. Flexbox tamamen CSS ile çalışır. JavaScript yalnızca ek etkileşim veya dinamik davranış gerektiğinde kullanılabilir.
Flexbox mobil uyumlu tasarım için yeterli mi?
Flexbox birçok responsive düzen için yeterlidir. Ancak iyi bir mobil deneyim; uygun boyutlar, okunabilir metinler, görseller ve gerektiğinde media query kullanımı gibi ek kararları da gerektirir.
gap mi, margin mi kullanmalıyım?
Bir flex grubundaki öğeler arasında tutarlı boşluk için genellikle gap kullanmak daha kolaydır. Bir öğeye özgü dış boşluk gerektiğinde margin uygundur.
15. Sonuç ve Alıştırma
CSS Flexbox, modern arayüz geliştirmede en kullanışlı yerleşim araçlarından biridir.
display: flex ile bir kapsayıcı oluşturabilir, justify-content ile ana eksendeki dağılımı, align-items ile çapraz eksendeki hizalamayı kontrol edebilirsiniz.
gap, flex-wrap ve flex özellikleri ise düzenin farklı ekran genişliklerine uyum sağlamasına yardımcı olur.
Alıştırma: Mini projedeki ders kartlarına dördüncü bir kart ekleyin. Kartların dar ekranda alt alta, geniş ekranda yan yana yerleşimini inceleyin. Sonra kart içindeki açıklama uzunluklarını değiştirerek bağlantıların hizalanmasını gözlemleyin.
Nizokka Akademi serimizin bir sonraki yazısında CSS Grid ile satır ve sütunları birlikte yönetmeyi öğreneceğiz.