CSS flex Özelliği Nedir ve Nasıl Kullanılır?

CSS flex özellikleri, display:flex ve ya display:inline-flex olması durumunda kullanılabilirler. Şİmdi CSS flex özelliklerini tek tek inceleyelim.

flex-direction

flex-direction özelliği kapsayıcı eleman içindeki esnek kutuların sıralama yönünü belirler. Dört farklı değer alabilir. Bunlar; row, row-reverse, column, column-reverse.

row: Esnek kutuları soldan sağa sıralar.

row-reverse: Esnek kutuları sağdan sola sıralar.

column: Esnek kutuları kolon olarak yukarıdan aşağı sıralar.

column-reverse: Esnek kutuları row-reverse gibi ama alttan yukarı sıralar.

flex-wrap

İki ve daha fazla satırdan oluşan esnek kutuların nasıl bir davranış sergileyeceğini belirlemek için kullanılır. Üç farklı değer alabilir. Bunlar; nowrap, wrap, wrap-reverse.

nowrap: Tek satırda esnek kutular soldan sağa sıralanır.

wrap: İki veya daha fazla satırda esnek kutular soldan sağa sıralanır.

wrap-reverse: iki veya daha fazla satırda esnek kutular sağdan sola sıralanır.

flex-flow

Yukarıda bahsettiğimiz iki özelliğin (flex-direction ve flex-wrap) kısayoludur. İki özelliği tek bir tanım ile tanımlama imkanı verir.

justify-content

Esnek kapsayıcı içindeki elemanların x ekseninden nasıl hizalanacağını belirler. Beş farklı değer alabilir. Bunlar; flex-start, flex-end, center, space-between, space-around.

flex-start: Esnek taşıyıcı içindeki kutular kapsayıcının başından başlayarak (flex direction’da belirtildiği gibi) dizilirler.

flex-end: Elemanlar sondan başlayarak dizilir.

center: Kutular kapsayıcının orta çizgisine göre hizalanarak dizilirler.

space-between: Kutular eşit olarak dizilir. İlk kutu orta çizginin başında, son kutu sonunda yer alır.

space-around: Kutular arası boşluk eşit olacak şekilde dizilir.

align-items

Bu özellik kutuların y ekseninde nasıl hizalanacağını belirler. justify-content’in dikey şekli de diyebiliriz. Beş değer alır. flex-start, flex-end, center, baseline, stretch

flex-start: Kutular kapsayıcının üst çizgisinden başlayarak dizilir.

flex-end: Kutular kapsayıcının alt çizgisinden başlayarak dizilir.

center: Kutular kapsayıcının dikey olarak ortasında dizilir.

baseline: Her kutu içerisindeki ilk satırın yazı tipi dikkate alınarak dikeyde hizalanır.

stretch: Kutular kapsayıcı yüksekliğine eşitlenir. (min-width/max-width değerleri dikkate alınır)

align-content

justify-content‘in yatayda yaptığını dikeyde yapar. İki veya daha fazla satırdan oluşan esnek kutuların dikeyde hizalanması için kullanılır. Altı farklı değer alabilir. Bunlar; flex-start, flex-end, center, space-between, space-around, stretch.

flex-start: Kutular kapsayıcının üst çizgisinden başlayarak dizilir.

flex-end: Kutular kapsayıcının alt çizgisinden başlayarak dizilir.

center: Kutular kapsayıcının dikey olarak ortasında dizilir.

space-between: İlk satır kapsayıcı üst çizgisine, son satır kapsayıcı alt çizgisine hizalanacak şekilde dizilir.

space-around: Satırlar arası eşit boşluk kalacak şekilde dizilir.

stretch: Satırlar boşluk kalmayacak şekilde dikeyde hizalanır.

order

Varsayılan olarak esnek kutular kodda yazılan sıra ile dizilir. order özelliği esnek kapsayıcı içindeki öğelerin kaçıncı sırada görünmesi gerektiğini belirlememizi sağlar.

Yukarıdaki örnekte ikinci sıradaki eleman order tanımı ile üçüncü sıraya atılmıştır.

Not: -1 değeri tanımlanan kutu ilk başa gelecektir.

CSS flex özellikleri konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/css/

Sosyal Medya Hesaplarımız

Son Eklenen Yazılar