X
Ankara Web Tasarim
Anasayfa --- Css --- Flex CSS Nedir?

Yazar: 16 Haziran 2023

Flex CSS Nedir?

Flexbox CSS, öğelerin bir düzen içinde sıralanmasını ve hizalanmasını kontrol etmek için kullanılan bir CSS modülüdür. Flexbox, web sayfalarının responsive tasarımında esnek ve dinamik bir düzen oluşturmak için kullanılan güçlü bir araçtır.

Flexbox’un başlıca avantajları şunlardır:

  1. Esnek düzen: Flexbox, öğelerin bir düzlemde sıralanmasını ve hizalanmasını kolaylaştırır. Öğeler, kullanılabilir alanın en iyi şekilde kullanılmasını sağlamak için otomatik olarak genişleyebilir, daralabilir veya boşlukları doldurabilir.
  2. Hizalama: Flexbox, öğeleri yatay veya dikey olarak hizalamak için kullanılır. Öğeleri ortalamak, sağa, sola, üste veya alta hizalamak gibi çeşitli hizalama seçenekleri sunar.
  3. Sıralama: Flexbox, öğelerin sıralanmasını değiştirmek için kullanılır. Sıralama, öğeleri farklı sıralarda görüntülemek veya öğeleri tersine çevirmek gibi farklı senaryolarda faydalı olabilir.
  4. Öğe Kontrolü: Flexbox, öğelerin genişliklerini, yüksekliklerini, boşluklarını ve sıralarını kontrol etmek için kullanılır. Öğeler arasında esnek boşluklar eklemek, öğelerin boyutunu ayarlamak ve diğer düzenlemeleri yapmak için kullanılabilir.

Flexbox kullanımı için temel bazı özellikler şunlardır:

  • display: Bir öğeye “display: flex” veya “display: inline-flex” özelliği atanarak Flexbox özelliği etkinleştirilir.
  • flex-direction: Öğelerin düzlemde nasıl sıralanacağını belirler (row, row-reverse, column, column-reverse).
  • justify-content: Öğeleri yatay eksende nasıl hizalayacağını belirler.
  • align-items: Öğeleri dikey eksende nasıl hizalayacağını belirler.
  • flex-wrap: Öğelerin bir satıra sığmadığı durumlarda ne yapılacağını belirler.
  • flex-grow, flex-shrink, flex-basis: Öğelerin genişliklerini ve büyüklüklerini nasıl ayarlayacağını belirler.

Flexbox, CSS Grid ile birlikte kullanılarak daha karmaşık düzenler oluşturulabilir. Özellikle, responsive tasarımlar oluşturmak veya kompleks düzenleri yönetmek için Flexbox’un kullanımı oldukça yaygındır.

Daha Fazla Bilgi İçin Web Tasarım Ankara Ekibimizle İletişime Geçebilirsiniz.