CSS flexbox oluşturucu
Flex konteyneri ve öğelerini görsel olarak oluştur, ardından CSS, Tailwind sınıflarını veya satır içi stili kopyala.
CSS flexbox oluşturucu
Açılır menülerden flex-direction, flex-wrap, justify-content, align-items ve align-content değerlerini ayarlayın, herhangi bir birimde boşluk ekleyin ve bu araç flex konteyner kuralını sizin için yazacak — artı öğeleri için eşleşen bir kural ve kutuların nasıl hizalandığını gösteren küçük bir metin önizlemesi. Gezinti çubuğu, kart satırları, form araç çubukları veya tam kılavuza gitmeden öğeleri dağıtması, ortalanması veya kaydırması gereken herhangi bir düzen için kullanın.
Öğe kontrolleri flex-grow, flex-shrink ve flex-basis değerlerini seçtiğiniz öğe sayısı kadar eşit şekilde uygular, bu tam olarak gerçek çoğu flex satırının çalışma şeklidir: birden fazla kutuya uygulanan bir öğe sınıfı, kutu başına tek tek değerler değil. Align-content yalnızca flex-wrap değeri wrap veya wrap-reverse olarak ayarlandığında çıktıda görünür, çünkü tarayıcılar aksi takdirde bunu yok sayar — araç hiçbir zaman hiçbir şey yapmayan bir bildirimi yazdırmaz.
Nasıl inşa ettiğinize uyan çıktı biçimini seçin: bir stil sayfası için düz CSS, Tailwind yardımcı sınıfları (keyfi değer parantezleri varsayılan aralık ölçeğine uymayan boşlukları ve tabanları kapsar) veya hızlı bir prototip veya e-postayla güvenli işaretleme için satır içi stil özniteliği. Bir seçeneği değiştirdiğiniz andan itibaren her değer güncellenir ve düzen önizlemesi onunla birlikte yeniden çizilir — derleme adımı yok, yüklenecek harici CSS yok.
Her şey tarayıcınızda yerel olarak çalışır; burada yapılandırdığınız hiçbir şey yok gönderilmez. CSS iyi göründüğünde, kopyalayın, .txt dosyası olarak indirin veya başka bir araçla yinelemeyi devam ettirmek için girişe gönderin.