6XC

CSS Flexbox Oyun Alanı

flex-direction, justify-content, align-items, wrap ve gap'i canlı kutular üzerinde ayarlayın, kapsayıcı CSS'ini kopyalayın.

848 görüntülenme

1
2
3
4
5

Özetle Flexbox

display: flex, kapsayıcıyı tek boyutlu bir yerleşim motoruna çevirir. justify-content öğeleri ana eksende dağıtır, align-items çapraz eksende hizalar, flex-direction ekseni seçer, gap margin'siz boşluk verir. Kontrolleri oynatın; numaralı kutuların canlı dizilişini izleyin.

Sıkça Sorulan Sorular

Bir öğeyi tam ortaya nasıl alırım?

Meşhur üç satır: display: flex; justify-content: center; align-items: center; — yatay ve dikey ortalama tek seferde.

Flexbox mu Grid mi?

Flexbox, içeriğe göre boyutlanan tek boyutlu satır/sütunlarda parlar (araç çubuğu, menü, kart sırası). Grid, açık kolonlu iki boyutlu yerleşimler içindir. Birlikte de kullanılırlar.

Benzer Araçlar

CSS Gradient Oluşturucu Doğrusal, dairesel ve konik CSS degradelerini canlı önizlemeyle tasarlayın, kodu kopyalayın. Oluştur CSS Box Shadow (Gölge) Oluşturucu Kutu gölgesini görsel olarak tasarlayın — kaydırma, bulanıklık, yayılma, renk, opaklık ve inset — canlı önizlemeli. Oluştur CSS Border Radius Oluşturucu Köşeleri tek tek veya hep birlikte, px ya da % olarak yuvarlayın — canlı önizleme ve kopyalanabilir CSS. Oluştur CSS Text Shadow (Yazı Gölgesi) Oluşturucu Yazı gölgesini kaydırma, bulanıklık, renk ve opaklıkla tasarlayın — örnek metin üzerinde canlı önizleme. Oluştur