Flexbox Playground
Container ve her alt öğeyi görsel olarak ayarla, layout'un canlı güncellendiğini gör, bir öğenin üzerine gelerek flex shorthand'ı oku, sonra CSS, Tailwind, HTML, React JSX veya JSON olarak kopyala. 10 kullanıma hazır layout şablonu dahil.
Canlı önizleme
Düzenlemek için bir öğeye tıkla. Üzerine geldiğinde mevcut flex kısayolunu görürsün.
Düzen şablonları
Yaygın desenler için hazır başlangıç noktaları: navbar, kenar çubuğu, hero blokları, kart grid.
Flex konteyner
Her özellik bir CSS flex konteyner özelliğine birebir karşılık gelir — değiştir, önizleme anında güncellenir.
Flex öğeleri
3 / 12En fazla 12 öğe. Bir öğeyi düzenlemek için aşağıdaki etikete ya da önizlemedeki kutuya tıkla.
Bir öğeyi düzenlemek için aşağıdan ya da önizlemeden seç.
Kod çıktısı
Düz CSS, Tailwind sınıfları, ham HTML, React JSX ya da paylaşabileceğin bir JSON görüntüsü.
.flex-container {
display: flex;
gap: 16px;
}