Home
About
Product
Contact
FLEXBOX
Flex-Direction
default: row;
Column değerini aldığında justify-content dikeyde, align-items kuralı yatayda çalışır !!!
row: Öğeler yazı yönü ile aynı yönde yerleştirilir.
row-reverse: Öğeler yazı yönünün tersi yönünde yerleştirilir.
column: Öğeler yukarıdan aşağıya doğru yerleştirilir.
column-reverse: Öğeler aşağıdan yukarıya doğru yerleştirilir.
Flex-Wrap
default : nowrap;
Sığmayan sırayı alt sıraya atar.
nowrap: Tüm öğeler tek satıra sığar.
wrap: Öğeler satırlara bölünür.
wrap-reverse: Öğeler satırlara ters sırada bölünür.
Flex-flow
default : row nowrap;
flex-direction ve flex-wrap kuralları, flex-flow kısa yazım kuralı ile birlikte yazılabilirler.
Bu kısa yazım kuralı, iki kuralın değerlerini aralarında boşluk ile birlikte alır.
Örneğin, "flex-flow: row wrap;" kuralı ile row ve wrap değerlerini aynı anda verebilirsiniz.
Justify-content
default : flex-start;
Satır boyunca hareket ettirir.
flex-start: Öğeleri flexbox container'ın sol tarafına hizalar.
flex-end: Öğeleri flexbox container'ın sağ tarafına hizalar.
center: Öğeleri flexbox container'ın ortasına hizalar.
space-between: Öğeler eşit aralıklarla yatay şekilde yayılır.
space-around: Öğeler etraflarında eşit aralıklar olacak şekilde yatay şekilde yayılır.
space-evenly : geçerli satırın ana ekseni boyunca hizalar.
Align-items
default : stretch;
Sütun boyunca hareket ettirir.
flex-start: Öğeleri flexbox container'ın tepesine hizalar.
flex-end: Öğeleri flexbox container'ın aşağısına hizalar.
center: Öğeleri flexbox container'ın dikey ortasına hizalar.
baseline: Öğeleri flexbox container'ın yazı referans çizgisine(baseline) hizalar.
text in alt çizgisine göre(text bottom lar aynı hizada) hizalar. Item değil metin referans alınır.
stretch: Öğeler flexbox container boyunca uzarlar
Align-content
default : stretch;
align-content ile satırları birbirinden ayırabilirsiniz.
flex-start: Satırlar flex container'ın tepesinde toplanır.
flex-end: Satırlar flex container'ın aşağısında toplanır.
center: Satırlar flex container'ın dikey ortasında toplanır.
space-between: Satırlar aralarında eşit boşluk kalacak şekilde yayılırlar. ilk ve son satırı alt ve üste yapıştırır.
space-around: Satırlar etraflarında eşit boşluk kalacak şekilde yayılırlar.
stretch: Satırlar flex container'ı kaplamak için uzarlar.
Flex Item Properties
order : Default 0. Yatayda veya dikeyde item ları sıralar. 1 alınca en sağa atar. negatif değer alabilir.
flex-grow : Default 0. Item ın ne kadar büyüyeceğini belirler. (grow ve basis çakışabilir.)
flex- shrink : Default 1. Item ın ne kadar küçüleceğini belirler. 0 verilirse item(s) daralmaz.
flex-basis : Default auto. Varsayılan genişliği ifade eder. em px gibi değerler alabilir. Flex shorthand içinde kullanılırken ayırt edilebilmesini sağlar. (Sütun kullanılırlen varsayılan yüksekliği ifade eder.)
shorthand : "flex : grow shrink basis;" shorthand olarak verilebilir. Default : 0 1 auto;
align-self : align-items ile aynı değerleri alır. Tek bir item için kullanılır. Default align-items ı geçersiz kılar.