Canlı önizleme üzerinde flexbox özellikleriyle deneyler yapın ve oluşturulan CSS'i kopyalayın.
Bu araç hakkında
CSS Flexbox Oyun Alanı, bir flex kapsayıcısının ana düzen özellikleri için etkileşimli bir düzenleyicidir. Dört açılır menüden flex-direction, justify-content, align-items ve flex-wrap için değerler seçin; numaralı beş kutudan oluşan bir önizleme anında yeniden düzenlenir, böylece herhangi bir kod yazmadan önce her özelliğin düzeni nasıl şekillendirdiğini görebilirsiniz.
Önizlemenin altında, eşleşen .container kuralı siz çalışırken oluşturulur: display: flex ve ardından seçtiğiniz dört bildirim. Bir düğme, bir stil sayfasına yapıştırmaya hazır olarak tüm bloğu panonuza kopyalar. Yalnızca bu kapsayıcı düzeyindeki özellikler sunulur; flex-grow, order veya align-self gibi öğe başına ayarlar kapsanmaz.
Her şey tarayıcınızda çalışır. Hiçbir şey yüklenmez, hesap veya takip yoktur ve çevrimdışı çalışır. Flexbox sezgisi geliştirmenin ya da elle inceltebileceğiniz bir başlangıç kuralı üretmenin hızlı bir yoludur.
Sık sorulan sorular
Önizleme ne gösterir?
flex-direction, justify-content, align-items veya flex-wrap'i değiştirdikçe canlı olarak yeniden düzenlenen, numaralı beş kutu tutan bir flex kapsayıcısı.
Oluşturulan CSS kullanıma hazır mı?
Evet. Oluşturulan .container kuralını doğrudan stil sayfanıza kopyalayın; display: flex ile seçtiğiniz dört özelliği içerir.
Hangi flexbox özelliklerini ayarlayabilirim?
Dört açılır menü; flex-direction (row, row-reverse, column, column-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline) ve flex-wrap (nowrap, wrap, wrap-reverse) değerlerini denetler.
Çıktı gap veya öğe başına flex ayarları içerir mi?
Hayır. Kopyalanan kural yalnızca display: flex ve dört kapsayıcı özelliğini tutar. Önizlemedeki 8px boşluk yalnızca aralık içindir ve flex-grow, order veya align-self gibi öğe düzeyindeki özellikler dahil edilmez.