CSS Flexbox Oluşturucu
Esnek kutu düzeni için yön, hizalama, satır kaydırma ve boşluk değerlerini yapılandırarak CSS kodları oluşturun.
Aracı çalıştır
CSS Flexbox oluşturucu, modern web arayüzleri tasarlarken esnek kutu düzeni kurallarını hızlıca hazırlamanızı sağlar. Bu çevrim içi araç, belirlediğiniz yön, ana eksen hizalaması, çapraz eksen yerleşimi, satır kaydırma ve elemanlar arası boşluk değerlerine göre eksiksiz bir CSS bildirim bloğu üretir. Giriş alanlarına esnek kutu yönü için sütun veya satır seçeneklerini, hizalama kuralları için merkez veya iki uca yayma gibi standart CSS değerlerini girebilirsiniz. Boşluk alanına girilen sayısal değer, çıktı kodunda piksel birimi eklenerek düzenli biçimde sunulur. Herhangi bir değer belirtilmediğinde araç varsayılan olarak satır yönü, merkez hizalama, kaydırmasız düzen ve on piksellik boşluk kuralını uygular. Üretilen CSS kod bloğunu doğrudan stil dosyalarınıza veya bileşen tanımlarınıza kopyalayarak buton grupları, gezinme menüleri, ürün kartları ve esnek sayfa düzenleri oluşturabilirsiniz. Çıktı alanındaki bildirimleri projelerinizin arayüz gereksinimlerine göre uyarlayabilir, CSS düzenleme süreçlerinizi daha pratik hale getirebilirsiniz. Ekran boyutuna göre değişen duyarlı tasarımlarda bu kurallardan yararlanabilirsiniz.
Kullanım
- İçeriklerin sıralanma doğrultusunu belirlemek için yön alanına istediğiniz değeri girin veya varsayılan satır düzenini bırakın.
- Ana eksen üzerindeki dağılım için justify alanına CSS hizalama kuralını tanımlayın.
- Çapraz eksendeki dikey veya yatay yerleşim kuralını align alanına yazın.
- Elemanların sığmadığında alt satıra geçip geçmeyeceğini wrap alanında belirtin.
- Elemanlar arasındaki mesafeyi gap alanına sayı olarak girin.
- Sonuç alanında üretilen CSS kod bloğunu kopyalayarak projenizin stil şablonuna ekleyin.
Örnekler
- Kart listesini yatay olarak ortalamak ve aralarında 20px boşluk bırakmak için yön değerini row, ana eksen hizalamasını center, çapraz hizalamayı center, satır kaydırmayı wrap ve boşluk değerini 20 olarak ayarlayın.
- Kenar çubuğu menüsünü dikey sıralamak ve ögeleri üstten başlatmak için yön değerini column, ana eksen hizalamasını flex-start, çapraz hizalamayı stretch, satır kaydırmayı nowrap ve boşluk değerini 15 olarak girin.
SSS
Boşluk alanına birim yazmak gerekir mi?
Hayır, girilen sayısal değere araç tarafından otomatik olarak piksel (px) birimi eklenir.
Alanlar boş bırakıldığında hangi CSS kuralları üretilir?
Varsayılan olarak satır yönü (row), merkez ana eksen hizalaması (center), merkez çapraz hizalama (center), kaydırmasız düzen (nowrap) ve 10px boşluk kuralları üretilir.
Oluşturulan CSS kodu tarayıcıda doğrudan uygulanır mı?
Araç kod üreteci olarak çalışır; oluşturulan CSS bloğunu kopyalayıp kendi projenizin stil dosyasına eklemeniz gerekir.