Flexbox, kısaca “flexible box” olarak adlandırılan CSS özelliklerine verilen isimdir. Flexbox, öğelerin bir bölümünde düzenlenmesini ve yerleştirilmesini kolaylaştırır. Öğelerin boyutlarını ve yerleşimini dinamik olarak değiştirebilir, öğeler arasındaki boşlukları otomatik olarak dağıtabilir veya sıralayabilirsiniz. Özellikle mobil uygulamalar ve web sayfaları için tasarlanmıştır.
CSS Flexbox Kullanımı
Flexbox kullanmak için, bir öğenin özelliklerine “display: flex” değerini atamanız gerekir. Bu öğeyi “flex container” (esnek kutu) olarak adlandırılır ve içindeki tüm öğeleri “flex item” (esnek öğe) olarak adlandırılır. Örneğin, bir etiketini esnek kutu olarak kullanmak için şöyle yazabilirsiniz:
<div style="display: flex"> <p>Flex item 1</p> <p>Flex item 2</p> <p>Flex item 3</p> </div>
Bu örnekte, <div> etiketi esnek kutu olarak kullanılmış ve içindeki tüm <p> etiketleri esnek öğeler olarak kullanılmıştır. Esnek kutu özelliklerine göre esnek öğelerin yerleştirilmesi ve boyutlandırılması gerçekleştirilir. Örneğin, esnek öğelerin yatay olarak sıralanmasını sağlamak için “flex-direction: row” özelliğini kullanabilirsiniz.
Flexbox ile ilgili daha fazla özellik ve kullanım örnekleri için, CSS Flexbox modülünün resmi dokümantasyonunu inceleyebilirsiniz.
CSS Flexbox Özellikleri
Flexbox, bir CSS layout sistemidir ve düzenli bir dizi elementi düzenlemek için kullanılır. Aşağıdakiler Flexbox’ın bazı özellikleridir:
- Ölçeklilik: Flexbox, elementleri boyutlarına ve ekran boyutlarına göre otomatik olarak yeniden düzenler.
- Flexibilite: Elementlerin ne kadar büyük veya küçük olmasını istediğinizi belirlemenize olanak tanır.
- Yön: Elementlerin hangi yönde dizilmesini istediğinizi belirlemenize olanak tanır (yatay veya dikey).
- Sıralama: Flexbox, elementlerin nasıl sıralanmasını istediğinizi belirlemenize olanak tanır.
- Align: Elementlerin nasıl hizalanmasını istediğinizi belirlemenize olanak tanır.
- Wrap: Elementleri ekran boyutlarına göre otomatik olarak sarmalamanıza olanak tanır.
- Order: Elementlerin hangi sırayla görüneceğini belirlemenize olanak tanır.
- Grow and Shrink: elementlerin ne kadar büyüyeceğini veya küçüleceğini belirlemenize olanak tanır.
Bu sadece Flexbox’ın bazı özellikleridir, daha fazla özellik ve kullanım alanları mevcuttur.
Display: Flex Nedir?
“display: flex” CSS özelliği, bir öğeyi esnek kutu (flex container) olarak tanımlar. Esnek kutu, içindeki öğelerin (flex items) yerleştirilmesi ve boyutlandırılması için kullanılan bir özelliktir.
Esnek kutu özellikleri aracılığıyla, esnek öğelerin yerleştirilme yönü, yatay ve dikey olarak nasıl yerleştirileceği, genişlik veya yükseklik oranları, satırlar arasındaki boşluklar ve daha pek çok özellik kontrol edilebilir. Bu özellik HTML elemanlarının görünümünü etkileyebilir. Esnek kutu özelliklerine göre esnek öğelerin yerleştirilmesi ve boyutlandırılması gerçekleştirilir.
