Sık kullanılan tüm flexbox özellikleri, geçerli oldukları yere göre gruplandırılmış: kapsayıcı ve öğe. Her satır, özelliği yaygın değerleri ve ne yaptığıyla eşleştirir.
Flexbox öğeleri tek boyutta dizer: bir satır ya da bir sütun. Üst öğeye display: flex verdiğinizde o bir flex kapsayıcısı olur; doğrudan alt öğeleri ise flex öğesi olur. Kapsayıcı özellikleri ana eksen ve çapraz eksen boyunca dağılımı denetler; öğe özellikleri tek bir öğenin nasıl büyüdüğünü, daraldığını ve hizalandığını denetler. Tek boyutlu çubuklar, satırlar ve ortalamalar için flexbox'ı seçin.
Referans tablosu · 13 kayıt
CSS FlexboxExplained
13 of 13 rows
Kapsayıcı
flex | inline-flex
Öğeyi bir flex kapsayıcısına dönüştürür.
row | column | row-reverse | column-reverse
Öğelerin üzerinde aktığı ana ekseni belirler.
flex-start | center | space-between | space-around | space-evenly
Öğeleri ana eksen boyunca dağıtır.
stretch | center | flex-start | flex-end | baseline
Öğeleri çapraz eksen boyunca hizalar.
flex-start | center | stretch | space-between
Çapraz eksende artan alan olduğunda sarılan satırları hizalar.
nowrap | wrap | wrap-reverse
Öğelerin daralmak yerine yeni satırlara sarılmasına izin verir.
0.5rem | 8px 16px
Öğeler arasındaki boşluk; yatay ve dikey.
Öğe
0 | 1 | 2
Öğenin boş alanı kardeşlerine göre ne ölçüde aldığı.
0 | 1
Alan yeterli olmadığında öğenin ne kadar daralacağı.
auto | 200px | 50%
Boş alan paylaşılmadan önceki başlangıç boyutu.
1 | 1 0 auto | 0 0 200px
grow shrink basis için kısaltma.
auto | center | flex-start | flex-end | stretch
Tek öğe için kapsayıcının align-items değerini geçersiz kılar.