Her flexbox özelliği canlı önizlemeyle, CSS ve Tailwind çıktısıyla birlikte.
align-items etkisini yalnızca ögeler çapraz eksende farklı boyuttayken gösterir; önizlemenin farklı yükseklikler kullanmasının sebebi budur.
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 12px;
flex flex-row justify-start items-stretch flex-nowrap gap-[12px]
flex-direction ögelerin hangi yöne akacağına, dolayısıyla hangi eksenin ana eksen olduğuna karar verir. Flexbox'taki her şey bu seçime göre tanımlanır, o yüzden buradan başlayın.
justify-content ögeleri ana eksende, align-items ise çapraz eksende konumlandırır. Yönü değiştirin ve ikisinin rol değiştirdiğini görün; çoğu kişiyi şaşırtan şey budur.
Önizleme gerçek bir flex kabıdır, yani gördüğünüz tam olarak CSS'in ürettiğidir. Düz bildirimi ya da eşdeğer Tailwind sınıflarını alın.
justify-content, flex-direction'ın belirlediği ana eksende; align-items ise çapraz eksende çalışır. Yönü row'dan column'a çevirin, ikisi fiilen yer değiştirir; flexbox kafa karışıklığının ana kaynağı budur.
Çünkü stretch ile ya da hepsi aynı boyuttaki ögelerle hizalanacak bir şey yoktur. Önizleme, etkinin görünmesi için bilinçli olarak farklı yükseklikte ögeler kullanır.
Tek boyut için flexbox: bir düğme sırası, gezinme çubuğu, kart altlığı. Satır ve kolonları aynı anda kontrol etmeniz gerektiğinde, örneğin sayfa düzeni ya da galeri için grid.
Olmadan, kap ne kadar daralırsa daralsın ögeler tek satıra sığmak için küçülür. wrap ile yeni satıra geçerler ki küçük ekranlarda genelde istenen budur.
Evet, flexbox'ta gap tüm güncel tarayıcılarda desteklenir. Kapta negatif kenar boşluğu artı her çocukta kenar boşluğu kullanan eski kalıbın yerini aldı.
space-around her ögenin iki yanına eşit boşluk verir, bu yüzden iki öge arasındaki boşluk kenarlardakinin iki katıdır. space-evenly ise kenarlar dahil her boşluğu aynı yapar.
Evet. Tailwind çıktısı standart utility sınıfları kullanır; gap, piksel değeriyle birebir eşleşsin diye keyfi değer olarak yazılır.
Evet, tamamen ücretsiz ve üyeliksiz.
Grid düzenlerini görsel olarak kurun; duyarlı auto-fit kolonlar dahil.
Aracı AçKatmanlı CSS gölgelerini canlı önizlemeyle kurun, sonra düz CSS veya Tailwind değeri olarak kopyalayın.
Aracı AçCSS'i küçültün veya düzenleyin; string ve data URI'ler bozulmadan, ne kadar küçüldüğünü görerek.
Aracı Aç