HIZLI
TEKLİF AL

Flexbox CSS Tüm Özellikleri İle Esnek Kutu Modeli

 

 

İÇİNDEKİLER

Flexbox CSS Nedir?

Flexbox yani esnek kutu modelini CSS'te kullanılan bir özellik olmaktan ziyade içerisinde birçok farklı hizalama özelliğini barındıran esnek kutu modeli olarak tanımlayabiliriz.

Flexbox CSS ile bir web arayüzünde öğeler arasındaki boşlukları ve hizalama şekillerini belirleyebilirsiniz. Flexbox ile öğeleri hem yatay eksende hem de dikey eksende hizalayabilir ve farklı ek hizalama seçenekleri de sunabilirsiniz.

Flexbox CSS'i çalıştırmak için display:flex; özelliğine sahip bir kapsayıcı öğe olması gerekir. İçerisindeki öğeleri de aşağıda belirtilen flexbox CSS özellikleri ile farklı şekillerde konumlandırabilirsiniz.

display:flex; Özelliği


.container{display:flex | inline-flex;}
                

Esnek kutu modeli flexboxın çalışabilmesi için kapsayıcı öğenin display:flex; ya da display:inline-flex; esnek kapsayıcı özelliklerine sahip olması gerekir. display flex özelliği hakkında daha fazla bilgi almak için yazımızı okuyunuz.


Flexbox Hizalama Eksenleri

Flexbox CSS özellikleri 2 eksene göre öğeleri hizalar. Main-axis (Ana Eksen) ve Cross-axise (Çapraz Eksen) göre öğeler hizalanmaktadır. main-axis ve cross-axis flex-direction değerine göre değişmektedir.

Flexbox CSS Eksenler Mantığı

Main-axis (Ana Eksen) Nedir?

main-axis flexbox yapısının ana eksenidir. flexbox yapısındaki öğeler main-axis doğrultusunda hizalnır. flex-direction özelliği ile bu ana eksen yatay ve dikey olmak üzere değişmektedir.

Cross-axis (Çapraz Eksen) Nedir?

Cross-axis yani çapraz eksen ana eksene dik olarak çalışmaktadır. flex-direction değeri ile main-axis değişince cross-axis de değişecektir.

flex:direction:row | row-reverse değerleri aldığında main-axis yatay eksen olurken cross-axis ise dikey eksen olacaktır.

Flex-direction Row Eksenleri

flex-direction:column | column-reverse değerleri aldığında da main-axis dikey eksen olacaktır ve cross-axis te yatay eksen olacaktır.

Flex-direction Column Eksenleri

Not: Flexbox yapısını içerisinde birçok CSS özelliği barındıran esnek bir hizalama modülü olarak düşünebilirsiniz. Flexboxın çalışma mantığını daha iyi kavramak için main-axis ve cross-axis kavramlarını anlamak önemlidir. Aşağıda main-axis ve cross-axisin değişmesinden sorumlu olan flex-direction özelliğini inceleyiniz.


flex-direction Özelliği

flex-direction özelliği ile öğeleri satır içi yönde sıralı bir şekilde ve alt alta blok şekillerde hizlama yapılabilir.

flex-direction 4 değere sahiptir.

flex-direction-row
flex-direction-column
row

row: row özelliği ile öğeler satır içi bloklar olarak yan yana hizalanır.

row-reverse

row-reverse özelliği ile öğeler satır içi bloklar sondan başlayarak yani tersten yan yana hizalanır.

column

column özelliği ile öğeler alt alta bloklar halinde listelenir.

column-reverse

column özelliği ile öğeler sondan başlayarak tersten alt alta bloklar halinde listelenir.


div.flex{flex-direction: row | row-reverse | column | column-reverse;}
                 

flex-direction -reverse eki ile öğeleri sondan başlayarak sıralama yeteneğine sahiptir. row-reverse ve column-reverse özellikleri ile öğeleri flex container içerisinde sondan başlayarak listelemenize imkan verir.

Flexbox CSS tüm modern web tasarım projelerinde kullanılan bir sayfa düzeni oluşturna ve hizalama özelliklerini kapsar.  Günümüzün Modern web tasarımcıları flexbox CSS'in yanı sıra Grid CSS'i de çok sıklıkla kullanmaktadır. Grid CSS felexboxa göre daha esnek bir yapıdır. Flexbox CSS'te hizlamalar tek boyutlu yapılırken Grid CSS'te 2 boyutlu yapılmaktadır.


flex-wrap Özelliği

flex-wrap CSS

flex-wrap CSS özelliği öğelerin kutuya nasıl sığacağını belirtmek için kullanılır. Esnek kutu içerisinde öğelerin alt satıra inmeden taşmasına izin verebilir ya da taşmadan alt satıra geçmesini sağlayabilirsiniz.

flex-wrap "3" değere sahiptir.

nowrap (Varsayılan)

nowrap özelliği ile öğeler flex kapsayıcı içerisnde flex-directionyönüne bağlı olarak genişliği ya da yüksekliği daralarak taşma yapar

wrap

wrap özelliği ile öğeler flex container içerisinde taşma yapmadan bir alt satıra ya da yan bloğa geçer. flex-direction:row; fazla öğe soldan sağa doğru alt satıra geçmeye devam eder. flex-direction:column ise bloklar aşağıdan yukarı yan yana oluşmaya devam eder

wrap-reverse

wrap-reverse özelliğinde örenk flex-direction:row; için bakacak olursak fazla öğe alt satıra geçtiği zaman sıralamayı terse çevirir ve row-reverse özelliği gösterir.


flex-flow Özelliği


.containter{flex-flow: <flex-direction> <flex-wrap>}
                

flex-flow CSS

flex-flow CSS özelliği esnek kutunun yönünü ve sarma davranışını belirler. ilk değer flex-direction değeridir, 2. değer ise flex-wrap değeridir. varsayılan olarak row nowrap değere sahiptir.


.containter{flex-flow: <flex-direction> <flex-wrap>}
.containter{flex-direction:row;} /* Varsayılan flex-direction değeri*/
.containter{flex-wrap:nowrap;} /* Varsayılan flex-wrap değeri*/
.containter{flex-flow:row nowrap;} /* Varsayılan flex-flow değeri*/
                  

Order Özelliği

order CSS


.element{order: 0 ;}
                                    

order özelliği sıralamada bir elemanı geriye atmak ya da ön sıraya almak için kullanılır. order varsayılan değeri "0" dır. order değeri negatif bir değer alabilir. order:-1 diye yazıldığında diğer elemanlarda order değeri tanımlı değil ise en öne çıkarır. ve oreder:1 denilince aynı şekilde elemanı en son sıraya gönderir.


flex-grow

flex-grow flexbox CSS

Bu özllik esnek kabın içerisindeki öğelerin büyüme faktörünü ayarlar. Yani esnek kapsayıcıda kalan alanın nekadarının öğeye aktarılacağını belirler. Eğer tüm öğelerin flex-grow değeri eşit ise tüm öğeler aynı kalan alan payını alır.

flex-grow:0; varsayılan değerdir. Negatif Değer Alamaz


div{flex-grow:0;} /* Varsayılan */
div{flex-grow:2;}
div{flex-grow:0.6;} /* Ondalıklı sayı değeri alabilir */
div{flex-grow:-1;} /*Yanlış İfade Negatif Değer Alamaz */
/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: revert;
flex-grow: unset;
                            

flex-shrink

flex-shrink flexbox CSS

flex-shtink değeri esnek kabın içerisindeki bir öğenin büzülme faktörünü belirler. Öğeler flex-shrink değerine göre büzülür.

flex-shrink varsayılan değeri "1" dır. Negatif değer alamaz.


div{flex-shrink:1;} /* Varsayılan */
div{flex-shrink:2;}
div{flex-shrink:0;}
div{flex-shrink:0.6;} /* Ondalıklı sayı değeri alabilir */
div{flex-shrink:-1;} /*Yanlış İfade Negatif Değer Alamaz */
/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: revert;
flex-shrink: unset;
                            

flex-basis

flex-basis flexbox CSS

flex-basis değeri bir öğenin ana başlangıç boyutunu belirler. flex-direction:column özelliği olan bir esnek kap içerisinde flex-basis değeri öğenin yüksekliğini etkiler.
Esnek kap içerisinde küçülme sırasında flex-basis değeri olan öğe de diğer tüm öğeler gibi de eşit küçülme gösterecektir.

flex-basis:auto; varsayılan başlangıç değeridir. ve negatif değer alamaz.


flex-basis:auto; /* Varsayılan değeri */
flex-basis:200px;
/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: revert;
flex-basis: unset;
                                

flex Kısayolu

flex kısayolu CSS

flex özellği aşağıdaki öğelerin birlikte yazılımının kısa yoludur.

  • flex-grow
  • flex-shrink
  • flex-basis

flex değeri 1, 2 ve 3 değer kullanılarak belirtilebilir. Aşağıda örnek olarak flex kullanımlarını ve açıklamalarını inceleyebilirsiniz.


/* Birimsiz tek bir sayı değeri yazıyor ise bu "flex-grow" değerini ifade eder; */ 
flex:1; 
flex:3;  /* flex-grow:3 */
/* birimli tek bir sayı değeri yazıyor ise bu "flex-basis" değerini ifade eder */
flex:30em;
flex:50%;
flex:100px; /* flex-basis:100px */
/*2 değer Bir birimsiz ve bir de birimsiz değer "flex-grow" ve "flex-basis" değerini ifade eder */
flex:1 200px; /* flex-grow:1 ve flex-basis:200px; */
/*2  birimsiz değer içeriyor ise"flex-grow" ve "flex-basis" değerini ifade eder */
flex:1 0; /* flex-grow:1 ve flex-shrink:0 */
/* 3 Değer içeriyorsa sırası ile "flex-grow", "flex-shrink", "flex-basis" değeri belirtilir */
flex:2 1 300px; /* flex-grow:2, flex-shrink:1, flex-basis:300px */
                                

Not: Kısaca flex değeri birimli bir değer içeriyor ise bu flex-basis değeridir. ilk birimsiz değer de flex-grow değeridir.


align-content Özelliği

align-content özelliği esnek kutu içerisindeki öğeleri nasıl yerleştireceğini belirlemek için kullanılır. Tüm içeriğe etki eden bir özelliktir ve flex kapsayıcıya tanımlanabilir.

align-content flexbox CSS

Yukarıdaki örnekte flex-direction:row; ve flex-wrap:wrap; özelliği için görseller hazırlanmıştır. align-content özelliği sadece flex-wrap özelliği wrap ve wrap-reverse değeri aldığında yukarıdaki resimdeki gibi çok satırlı dizilimde olacaktır.

align-content Değerleri

flex-start (varsayılan)

flex-start değeri ile öğeler esnek kapsayıcı başlangıcından başlayarak dizilmeye başlar

flex-end

flex-end değeri ile öğeler esnek kutunun en altından başlayarak dizilmeye başlayacaklardır.

center

center değeri ile öğeler esnek kutuya yatayda ortalı bir şekilde dizilir.

space-around

space-around değeri ile öğeler esnek kutuya eşit olarak dağılır. Her bitişik öğe arasındaki boşluk eşittir. ilk öğe ve son öğenin esnek kaba olan boşluğu bitişik öğelerin arasındaki boşluğun yarısıdır.

space-between

space-between değeri ile öğeler esnek kutuya eşit olarak dağılır. Her bitişik öğe arasındaki boşluk eşittir. ilk öğeler esnek kapsayıcın en üstüne son öğeler ise en altına dizilir.

space-evenly

space-around değeri ile öğeler esnek kutuya eşit olarak dağılır. Her bitişik öğe arasındaki boşluk eşittir. ilk öğe ve son öğenin esnek kaba olan boşluğu bitişik öğelerin arasındaki boşluğa eşittir.

stretch

stretch varsayılan değerdir. Öğeler eşit yükselikte olacak şekilde esnek kutunun yüksekliğine bağlı olarak eşit şekilde sıralanır.

baseline

baseline değeri ile aynı sıradaki öğeler metin tabanı hizasına göre sıralanarak dizilir.


justify-content Özelliği

justify-content css özelliği esnek kutu içerisindeki öğeleri ana eksene göre hizalar. aşağıdaki resimde hizalama durumlarını inceleyebilirsiniz.

justify-content flexbox CSS
flex-start

flex-start değeri ile öğeler esnek kapsayıcı içerisinde en baştan başlayarak dizilir.

flex-end

flex-end değeri ile öğeler esnek kapsayıcının sonuna itilir ve sonundan başlayarak dizilir.

center

center değeri ile öğeler esnek kapsayıcıya ortalı olarak dizilir.

space-between

space-between değeri ile öğe çifti arasındaki boşluklar eşit bir şekilde dizilir. Esnek kapsayıcı ile kapsayıcının en başındaki öğeler ile en sonundaki öğeler aasında boşluk kalmaz.

space-around

space-around eğeri ile öğe çifti arasındaki boşluklar eşit bir şekilde dizilir. Esnek kapsayıcı ile kapsayıcının en başındaki öğeler ile en sonundaki öğeler aasında boşluk öğeler arasındaki boşluğun yarısına eşit olur.

space-evenly

space-evenly eğeri ile öğe çifti arasındaki boşluklar eşit bir şekilde dizilir. Esnek kapsayıcı ile kapsayıcının en başındaki öğeler ile en sonundaki öğeler aasında boşluk öğeler arasındaki boşluğa eşit olur.


align-items Özelliği


.container{align-items:stretch | start | end | center | flex-start | flex-end | baseline;}
                                    
flex-start/start

flex-start/start değerinde öğeler esnek kabın başlangıç çizgisine doğru hizalanır.flex-direction kuralına göre değişkenlik gösterir.

flex-end

flex-end/enddeğerinde öğeler enek kabın en uç kenarına doğru hizalanır. flex-direction kuralına göre değişkenlik gösterir.

center

center değerinde öğeler çapraz eksene ortalı olarak hizalanır. flex-direction kuralına göre değişkenlik gösterir.

stretch

stretch değerinde öğeler esnek kabı doldurmak için germe işlemi yapılarak kapsanır.

baseline

baseline değerinde öğeler metin taban çizgileri baz alınarak dizilim gösterir.

align-items flexbox CSS

Yukarıdaki resimdeki öğelerin dizilişi flex-direction:row; ve flex-wrap:wrap; özelliğine sahip bir kapsayıcıya aittirç

align-items özelliği esnek kapsayıcıya verilen bir özelliktir ve içerisindeki öğelerin çapraz eksene göre hizalanmasını sağlar. flex-direction değerine göre farklı şekillerde hizalama sağlamaktadır. align-self özelliği ile de esnek kapsayıcı içerisindeki bir öğenin hizalaması düzenlenebilmektedir.


Gap / Column-Gap / Row-Gap

Gap CSS flexbox | Grid Gap

Gap CSS Özelliği esnek flexbox kapsayıcı içerisindeki öğelerin arasındaki yatay ve dikeyboşlukları belirler. Gap kelimesi boşluk ve açıklık anlamına gelmektedir. Grid CSS ızgara görünümü ve flexbox özellikleri ile kullanılabilir.


.container{
    display:flex;
    gap: 15px;
    gap: 15px 30px; /* row-gap - column-gap*/
    row-gap: 15px;
    column-gap:30px;
}
                        

gap özelliği "1" değer de alabilir "2" değer de alabilir. "2" değer aldığında ilk değer row-gap (satır arası açıklık) değeri ve 2. değer ise column-gap (satır içi açıklık) değeri olacaktır.