- Katılım
- 6 Kas 2021
- Mesajlar
- 3,276
- Tepkime puanı
- 4,783
- Puanları
- 113
- Yaş
- 31
- Konum
- Türkiye
- Dc
- fatihbulut
CSS Flexbox Kapsamlı Rehber: Modern Web Düzenleri Oluşturma
Flexbox'a Giriş
Flexbox (Flexible Box Layout), modern web tasarımında elementleri hizalamak ve dağıtmak için geliştirilmiş güçlü bir CSS düzen modelidir.Neden Flexbox Kullanmalıyız?
✔ Kolay ve tahmin edilebilir hizalama✔ Dinamik boyutlandırma ve dağıtım
✔ Daha az kodla daha fazla kontrol
✔ Mobil uyumlu tasarımlar için ideal
Flexbox Temel Yapısı
1. Flex Container Oluşturma
CSS:
.container {
display: flex; /* veya inline-flex */
}2. Eksen Kavramı
- Ana Eksen (Main Axis): flex-direction ile belirlenen yön
- Çapraz Eksen (Cross Axis): Ana eksene dik olan yön
Container Özellikleri
1. Yön Belirleme (flex-direction)
CSS:
.container {
flex-direction: row | row-reverse | column | column-reverse;
}2. Satır Sarma (flex-wrap)
CSS:
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}3. Eksenlerde Hizalama
CSS:
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items: stretch | flex-start | flex-end | center | baseline;
}4. Çok Satırlı Hizalama (align-content)
CSS:
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}Flex Item Özellikleri
1. Esneklik Derecesi (flex)
CSS:
.item {
flex: <grow> <shrink> <basis>;
}- flex-grow: Boş alan dağılımı
- flex-shrink: Taşma durumunda küçülme
- flex-basis: Başlangıç boyutu
2. Sıralama (order)
CSS:
.item {
order: <integer>; /* Varsayılan: 0 */
}3. Bireysel Hizalama (align-self)
CSS:
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}Gerçek Dünya Örnekleri
1. Mükemmel Merkezleme
CSS:
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}2. Responsive Kart Grid
CSS:
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px; /* Min 300px, eşit büyüme */
}3. Sticky Footer
CSS:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}Flexbox vs Grid: Ne Zaman Kullanılmalı?
| Özellik | Flexbox | Grid |
|---|---|---|
| Boyutlandırma | Tek eksende | İki eksende |
| Kullanım | Küçük bileşenler | Büyük düzenler |
| Hizalama | Daha basit | Daha detaylı |
Performans İpuçları
- Çok fazla flex container'dan kaçının
- flex-grow: 0 ile gereksiz büyümeyi engelleyin
- min-width/max-width ile esnek sınırlar belirleyin
Tarayıcı Desteği
Modern tarayıcıların tümü Flexbox'ı destekler. IE10-11 için -ms- prefix gerekebilir.
Alıştırmalar
- Flexbox ile responsive navbar yapın
- Eşit yükseklikte kartlar oluşturun
- Media query ile mobilde sütun düzenine geçin
Flexbox, modern CSS'in en güçlü araçlarından biridir. Bu rehberde öğrendiklerinizi uygulayarak daha esnek ve bakımı kolay arayüzler oluşturabilirsiniz.
