F L E X C O N T A I N E R Ö Z E L L İ K L E R İ
FLEX-DIRECTION ( Flex container özelliği )
1
2
3
4
5
FLEX-WRAP ( Flex container özelliği )
1
2
3
4
5
ALIGN-ITEMS ( Flex container özelliği )
1
2
3
4
5
JUSTIFY-CONTENT ( Flex container özelliği )
1
2
3
4
5
ALIGN-CONTENT ( Flex container özelliği )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
F L E X I T E M S Ö Z E L L İ K L E R İ
ALIGN-SELF ( Flex item özelliği )
Daha iyi anlaşılması için bu özellik sadece 3. elemana verilmiştir.
1
2
3
4
5
FLEX-GROW ( Flex item özelliği )
Daha iyi anlaşılması için bu özellik sadece 1. elemana verilmiştir.
Grow'u yüksek olan elemanın genişliği her zaman daha fazla olur.
1
2
flex-grow:2;
3
flex-grow:3;
4
flex-grow:4;
5
flex-grow:5;
FLEX-SHRINK ( Flex item özelliği )
Daha iyi anlaşılması için bu özellik sadece 1. elemana verilmiştir.
Shrink olan ve ya shrink'i yüksek olan elemanın genişliği her zaman daha az olur. Shrink'in çalışması için içdeki elemanları toplam genişliğinin kapsayıcıdan fazla olması gerekir bu yüzden her bir elemana 25% toplamda 125% genişlik verilmiştir. Bu sayade shrink'i çalışır hale getirdik. Tüm elemanlar alana eşit yayılır ancak shrink'i fazla olan diğerlerine göre daha az genişler
1
2
flex-shrink:2;
3
flex-shrink:3;
4
flex-shrink:4;
5
flex-shrink:5;
FLEX ( Flex item özelliği )
Burada tüm özellikler seçilebilir. Dikkat etmeniz gereken "flex-basis" var ise diğer özellikler etkisizdir.
Karşılaştırmak istediklerinizi eleman1 ve eleman2 başlıklarından birer tane seçin. Fazla seçimlerde en sonda olan çalışacaktır.
Eleman 1
Eleman 2
1
2
ORDER ( Flex item özelliği )
Daha iyi anlaşılması için bu özellik sadece 1. elemana verilmiştir.
Order mevcut sırayı değerine göre değiştirir. Yüksek değer son sıraya, düşük değer ilk sıraya götürür.
1
2
order:2;
3
order:3;
4
order:4;
5
order:5;