CSS Flexbox Rehberi
CSS Flexbox kapsayıcı ve öğe özelliklerini, varsayılan değerleri ve pratik düzen kalıplarını tek bir başvuru kaynağında inceleyin.
Aracı çalıştır
CSS Flexbox rehberi, web arayüzü geliştirirken esnek kutu düzeni özelliklerini hızlıca incelemenizi sağlayan pratik bir referans aracıdır. Bu araç hem kapsayıcı (container) hem de alt öğe (item) düzeyindeki tüm temel Flexbox kurallarını listeler. Kapsayıcı tarafında display modu, ana eksen yönü, satır kaydırma kuralları, ana ve çapraz eksen hizalamaları, çok satırlı hizalama seçenekleri ile 16px veya 1rem gibi boşluk (gap) değerlerini inceleyebilirsiniz. Öğe düzeyinde ise büyüme oranı, küçülme katsayısı, başlangıç boyutu, birleşik flex kısayolu, bireysel hizalama ve sıralama değerlerini adım adım görebilirsiniz. Başvuru kaynağı; yatay yön, satır kaydırmama, başlangıç hizası, esneme, sıfır büyüme, bir küçülme ve sıfır sıra gibi standart varsayılan ayarları açıkça sunar. Ek olarak içerik ortalama, gezinme menüsü, saran kart yerleşimleri, kenar çubuğu düzenleri, yapışkan altbilgi ve eşit genişlikli sütunlar için hazır CSS kalıp kodlarını doğrudan içerir. Tasarım gereksinimlerinize uygun kod parçalarını seçerek projelerinizde hızla uygulayabilirsiniz.
Kullanım
- Rehberi çalıştırmak için ekrandaki Çalıştır butonuna tıklayın.
- Sonuç alanında listelenen kapsayıcı (container) ve öğe (item) özelliklerini inceleyin.
- Özelliklerin varsayılan değerlerini ve olası parametre seçeneklerini kontrol edin.
- İçerik ortalama, yapışkan altbilgi veya gezinme menüsü gibi örnek CSS kalıplarından projenize uygun olanı seçip stil dosyanıza aktarın.
Örnekler
- Kapsayıcıyı yatay hizalamak ve içeriği ortalamak için display: flex; justify-content: center; align-items: center kurallarını referans üzerinden inceleyin.
- Alt alta dizilen çoklu kartlarda satır taşmasını sağlamak ve aralara 1rem boşluk bırakmak için flex-wrap: wrap ve gap: 1rem tanımlarını kullanın.
SSS
Flexbox kapsayıcısının varsayılan yönü nedir?
Flexbox için varsayılan ana eksen yönü satır (row) düzenidir ve öğeler varsayılan olarak tek satırda kaydırma yapılmadan (nowrap) sıralanır.
Flexbox rehberi hangi hazır kalıp kodlarını içerir?
Rehber; içeriği tam ortalama, gezinme çubukları, saran kart düzenleri, kenar çubuğu yerleşimleri, yapışkan altbilgi (sticky footer) ve eşit sütunlar gibi yaygın CSS düzenlerini içerir.
Flexbox öğelerinde varsayılan büyüme ve küçülme değerleri nasıldır?
Varsayılan olarak büyüme değeri 0, küçülme değeri 1 ve başlangıç hizalaması ise kapsayıcı boyunca esneme (stretch) şeklindedir.