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

Yapısı: flex-direction: <deger>
Aldığı Değerler: row | row-reverse | column | column-reverse
Başlangıç değeri: row
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

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

Yapısı: flex-wrap: <deger>
Aldığı Değerler: nowrap | wrap | wrap-reverse
Başlangıç değeri: row
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

İ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

Yapısı: flex-flow: <flex-direction> || <flex-wrap>
Aldığı Değerler: row, row-reverse, column, column-reverse || nowrap, wrap, wrap-reverse
Başlangıç Değeri: row nowrap
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

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

Yapısı: justify-content: <deger>
Aldığı Değerler: flex-start | flex-end | center | space-between | space-around
Başlangıç Değeri: flex-start
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

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.

CSS flex özellikleri

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

Yapısı: align-items: <değer>
Aldığı Değerler: stretch | flex-start | flex-end | center | baseline
Başlangıç Değeri: stretch
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

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

CSS flex özellikleri

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

Yapısı: align-content: <değer>
Aldığı Değerler: stretch | flex-start | flex-end | center | space-between | space-around
Başlangıç Değeri: stretch
Uygulanabilen Elementler: Esnek kapsayıcı elemanlara
Kalıtsallık: Yok

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.

CSS flex özellikleri

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

Yapısı: order: <sayı>
Aldığı Değerler: sayı
Başlangıç Değeri: 0
Uygulanabilen Elementler: Esnek öğelere ve esnek kapsayıcı içindeki absolute tanımlı alt öğelere
Kalıtsallık: Yok

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

instagram logo
twitter logo

Son Eklenen Yazılar

Bir Cevap Yazın

%d blogcu bunu beğendi: