CSS 3 Flexbox 1 – FlexBox Nedir?

Merhabalar.

Bu eğitim yazı dizim boyunca CSS Flexbox modülünden bahsediyor olacağım. İlk yazımda genel olarak Flexbox nedir buna bakalım istedim.

CSS Flexbox, yani esnek kutu modeli, web tasarımında düzen oluşturmak için kullanılan bir düzenleme teknolojisidir. Esnek kutu modeli, öğelerin bir konteynır içinde nasıl hizalandığını ve dağıtıldığını kontrol etmek için kullanılır. Temelde, bir kutu içindeki öğelerin düzenini ve yerleşimini yönetmek için güçlü bir araçtır. Şimdi, CSS Flexbox’in ana özelliklerine ve nasıl kullanıldığına daha yakından bakalım.

Temel Kavramlar

Esnek Konteynır (Flex Container):

Flexbox, düzeni kontrol etmek için bir konteynır (ana kutu) gerektirir. Bu konteynır, display: flex; veya display: inline-flex; özelliği ile tanımlanır.

Esnek Öğeler (Flex Items):

Konteynır içindeki her öğe, esnek öğe olarak kabul edilir. Bu öğeler, konteynır içinde düzenlenir ve hizalanır.

Ana Özellikler

Yatay ve Dikey Düzen:

Flexbox, öğeleri yatay veya dikey olarak düzenlemek için kullanılabilir. flex-direction özelliği ile yönlendirme kontrol edilebilir.

Hizalama (Alignment) ve Dağıtım (Distribution):

Öğeler, konteynır içinde hizalanabilir ve dağıtılabilir. justify-content ve align-items özellikleri bu konuda önemli rol oynar.

Esneklik (Flexibility):

Öğeler arasında esneklik tanımlamak için flex özelliği kullanılır. Bu, öğelerin konteynır içinde ne kadar yer kaplayacaklarını belirler.

Sıralama (Ordering):

order özelliği ile öğelerin sıralamasını belirleyebilirsiniz. Daha yüksek order değeri, öğeyi daha sona yerleştirir.

Sarılma (Wrapping):

Eğer öğeler tek bir satıra veya sütuna sığmazsa, flex-wrap özelliği ile sarılma davranışını kontrol edebilirsiniz.

Temel Kullanım

Flex İtem Özellikleri:

Her esnek öğe için ayrı özellikler belirlenebilir. flex-grow, flex-shrink, ve flex-basis özellikleri, öğelerin nasıl büyüdüğünü ve küçüldüğünü kontrol eder.

Örnek Kullanım

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
}

Yukarıdaki örnek, bir konteynırı esnek hale getirir, öğeleri boşluğa yayarak hizalar ve öğeleri dikey olarak ortalar.

Sonuç

CSS Flexbox, web tasarımcılarına daha esnek ve düzenli bir sayfa yapısı oluşturma gücü verir. Bu, özellikle karmaşık düzenlerde ve farklı ekran boyutlarına uyum sağlamak istendiğinde büyük bir avantaj sağlar. Flexbox’in bu temel özellikleri, modern web tasarımının vazgeçilmez bir aracı haline getirir.

Bir sonraki yazımda görüşmek üzere.