Nasıl kullanılır?
- Kutu için bir Sınıf adı yazın, örneğin toolbar. CSS bunu bir sınıf seçicisi olarak kullanır.
- flex-direction, flex-wrap ve hizalama değerlerini seçin. Her biri önce kendi başlangıç değerini gösterir.
- Öğe sayısı (1 ile 12 arası) alanını belirleyin, sonra her öğenin flex-grow, flex-shrink ve flex-basis değerlerini girin.
- Önizlemeye bakın, sonra CSS'i stil sayfanıza kopyalayın ve sınıfı kutuya verin.
Kutunun özellikleri
CSS Esnek Kutu Düzeni Modülü esnek kutunun çocuklarını bir ana eksen boyunca dizer. flex-direction eksenin yönünü, flex-wrap ise çocukların yeni bir satıra geçip geçemeyeceğini seçer. justify-content çocukları ana eksen boyunca yayar; align-items ve align-content ise onları ana eksenin dik yönünde yerleştirir.
- flex-direction başlangıçta row değerindedir; row-reverse, column ve column-reverse da alır.
- flex-wrap başlangıçta nowrap değerindedir; wrap ve wrap-reverse da alır.
- justify-content başlangıçta flex-start, align-items ve align-content ise başlangıçta stretch değerindedir.
Öğelerin özellikleri
Kutunun her çocuğu bir öğedir ve üç esneklik özelliği ona ne kadar yer verileceğini belirler. flex-grow başlangıçta 0'dır ve boş alanı katsayı oranında paylaştırır. flex-shrink başlangıçta 1'dir ve yer az olduğunda bir öğenin ne kadar vazgeçeceğini söyler. flex-basis başlangıçta auto'dur, yani öğenin kendi boyutunu kullanır; bir uzunluk ya da yüzde ise önce bir boyut verir.
flex: flex-grow flex-shrink flex-basis; başlangıç değeri 0 1 autoAracın yazmadıkları
- order, align-self ve gap özellikleri; bunları kutuya ya da bir öğeye elle ekleyebilirsiniz.
- On iki öğeden sonrası: araç 12 öğede durur; daha uzun bir liste için kuralları elle yazmak gerekir.
Örnek: sarılan bir araç çubuğu, üç öğeyle
Sınıf adı toolbar, flex-wrap wrap, justify-content space-between ve align-items center. İlk öğe başlangıç değerlerini korur, bu yüzden kuralı yoktur. İkinci öğe boş alanı dolduracak şekilde büyür; basis değeri 0'dır. Üçüncü öğe boyutunu korur; basis değeri 200px'dir. Araç yalnızca ikinci ve üçüncü öğeler için bir kural yazar.
| Öğe | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| 1 | 0 | 1 | auto |
| 2 | 1 | 1 | 0 |
| 3 | 0 | 0 | 200px |
Sık sorulan sorular
flex-grow ile flex-basis arasındaki fark nedir?
flex-basis, boş alan paylaşılmadan önce öğenin başladığı boyuttur. flex-grow ise boş alanın nasıl paylaşılacağını, her öğenin katsayısı oranında belirler. Basis'i 0, grow'u 1 olan bir öğe, diğerlerinin bıraktığı alanı alır.
Örnekteki ilk öğenin neden kuralı yok?
Değerleri özelliklerin başlangıç değerleridir: flex-grow 0, flex-shrink 1 ve flex-basis auto. Tarayıcı bu değerleri kural olmadan kullanır; bu yüzden araç yalnızca bunlardan farklı bir öğe için kural yazar.
align-items neden stretch ile başlıyor?
CSS Esnek Kutu Düzeni Modülü align-items için başlangıç değeri olarak stretch verir; öğeler, başka bir değer seçmediğiniz sürece dik eksende kutunun tamamını kaplar. Araç aynı değerle başlar, böylece CSS, hiçbir bildirim olmadığında tarayıcının yaptığıyla aynıdır.
Basis neden yalnızca px, rem, em ve yüzdeyi kabul ediyor?
Araç bu birimleri denetler. auto ya da birimsiz 0 da kabul edilir. vw gibi başka birimler burada sunulmaz; düzeniniz gerektiriyorsa onları elle yazın.
Öğeler arasına boşluk ekleyebilir miyim?
Bu araçla hayır; araç yalnızca kutunun beş özelliğini ve öğelerin esneklik değerlerini yazar. Boşluğu, CSS'i kopyaladıktan sonra kutunun kuralına elle ekleyin.
Ürettiğim CSS bir yere gönderiliyor mu?
Hayır. Önizleme ve CSS tarayıcınızda üretilir. Hiçbir şey saklanmaz ya da sunucumuza gönderilmez; bu yüzden sayfadan ayrılmadan önce CSS'i kopyalayın.
Kaynaklar
Rakamlar ve metin en son 12 Kasım 2026 Perşembe tarihinde kontrol edildi.