CSS flexbox, tek boyutlu (satır veya sütun) yerleşim düzeni oluşturmanın en pratik yöntemidir. Float ve position gibi eski yöntemlerin yerini alan flexbox daha az kod, daha esnek sonuç sunar. **Adım 1: Flex Container Tanımlayın** Ebeveyn elemana `display: flex;` uygulayın. Tüm doğrudan alt elementler artık flex item olur: ```css .container { display: flex; } ``` CSS flexbox çalışması tam olarak bu tek satırla başlar. **Adım 2: Yönü Belirleyin** `flex-direction` ile elemanlar yatay veya dikey dizilir: - `row` (varsayılan): soldan sağa - `column`: yukarıdan aşağıya - `row-reverse` ve `column-reverse` ters yönler **Adım 3: Hizalamayı Ayarlayın** `justify-content` ana eksen hizasını, `align-items` çapraz eksen hizasını kontrol eder: ```css .container { display: flex; justify-content: center; align-items: center; } ``` CSS flexbox ile dikey ortalama artık iki satırla yapılır. **Adım 4: Satır Kırma Ekleyin** `flex-wrap: wrap;` ile öğeler sığmadığında yeni satıra geçer. Responsive düzenler için bu özellik kritiktir. **Adım 5: Flex Item Boyutlandırın** `flex-grow`, `flex-shrink` ve `flex-basis` özelliklerini anlayın. Kısaltması: `flex: 1` her öğeye eşit alan verir. CSS flexbox'ta `flex-grow` en sık kullanılan boyutlandırma aracıdır. **Adım 6: Bireysel Hizalama Yapın** `align-self` ile tek bir öğenin hizalamasını diğerlerinden bağımsız ayarlayabilirsiniz. **Adım 7: Gerçek Bir Düzen Uygulayın** Navigation bar, kart grid veya footer yerleşimini CSS flexbox ile oluşturun. Teorik öğrenme pratikle pekişir; gerçek bir bileşen yazmadan geçmeyin.