CSS Flexbox Nedir?
CSS Flexbox (Flexible Box Layout), bir satır veya sütunda alan dağıtmak ve öğeleri hizalamak için tek boyutlu bir düzen modelidir. Flex kapsayıcı display: flex ile tanımlanır ve doğrudan çocukları flex öğeleri haline gelir. Temel kapsayıcı özellikleri: flex-direction (satır veya sütun), flex-wrap (tek satır vs. çok satır), justify-content (ana eksen hizalaması), align-items (her satır için çapraz eksen hizalaması) ve align-content (birden fazla satırın çapraz eksen hizalaması). Temel öğe özellikleri: flex-grow (öğenin ne kadar büyüdüğü), flex-shrink (ne kadar küçüldüğü), flex-basis (başlangıç boyutu) ve align-self (belirli bir öğe için kapsayıcının align-items değerini geçersiz kılar). Flexbox; gezinme çubukları, kart satırları, ortalanmış düzenler ve tek boyutlu herhangi bir düzenleme için idealdir.
CSS Flexbox Oluşturucu Nasıl Kullanılır
-
Açılır menüleri ve giriş alanını kullanarak kapsayıcı özelliklerini (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) ayarlayın.
-
Seçmek için önizlemedeki herhangi bir öğeye tıklayın (turuncu olur).
-
Öğe panelinde seçili öğenin flex-grow, flex-shrink, flex-basis ve align-self değerlerini belirleyin.
-
'+ Öğe Ekle' düğmesine tıklayarak öğe ekleyin; seçili öğeyi silmek için 'Kaldır' düğmesine tıklayın.
-
Oluşturulan kodu görmek için CSS ve HTML sekmeleri arasında geçiş yapın, ardından Kopyala düğmesine tıklayın.
-
Varsayılan 3 öğeli düzenle yeniden başlamak için 'Tümünü Sıfırla' düğmesine tıklayın.