CSS’də Flexbox modeli

Flexbox , geniş proyektlərdə , eləcə də qarışıq strukturlu Web səhifələrdə Front-End Developerin işini asanlaşdıracaq CSS özəlliyidir . Mənası elastik qutu deməkdir . Flex modelinin əsas funksiyası , elementləri horizontal və vertical olaraq nizamlamaqdan ibarətdir . Bu özəllik , 2009 ilinə qədər 2 dəfə yenilənmişdir . Ən son versiyası 2012-ci ildə güncəllənib .

Flexbox modelinin üstünlükləri

• Flexbox elastik qutu olduğundan , flexboxla səhifəni responsiv etmək daha sadədir
• Flexboxla elementləri ( bu bloklar , və ya content ola bilər ) sağa və sola nizamlaya bildiyimiz üçün float parametrinə ehtiyac yoxdu . Bu da saytın strukturunun pozulmasını əngəlləyir
• Elementlərin ölçülərini daha asan yolla nizamlamaq olur
• Bu CSS özəlliyi ilə elementləri şaquli ( vertical ) olaraq nizamlamaq çox sadədir

Flexbox modelinin üstün olmayan cəhətləri

• Brauzer dəstəyi hələ də istənilən səviyyədə deyil
• Bəzən bu modeli öyrənmək çətin kimi görünə bilər

Flexbox nədir və necə işlədilir ???

Flex əsas elementə ( bu içində çox sayda element olan blokdur ) , və onun daxilindəki alt elementlərə təsir edir . Bildiyimiz kimi HTML elementləri ya block , ya da inline element olur . Bu elementlərə bu özəlliyi verən display parametridir . Flexboxu istifadə etmək üçün

display : flex ;

Display parametrinə flex təyinatını ötürmək lazımdır . Flex-i istifadə etmək üçün Element və ona aid alt elementlərin olması əsas şərtdir . Element dedikdə blok ( qutu ) nəzərdə tutulur . Bunu şəkil üzərində daha yaxşı başa düşmək olar .

Burada sarı rənglə rənglənmiş hissə əsas element , digər rənglərlə rənglənmiş hissə isə əsas elementin alt elementləridir .

Digər brauzerlər üçün yazılış aşağıdakı kimidir .

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

İndi isə digər parametrlərə baxaq :

1. flex-direction

Bu özəllik blok içində olan elementlərin vertical və horizontal olaraq necə düzüləcəyini təyin edir . 4 təyinat götürür .

• flex-direction: row;
• flex-direction: column;
• flex-direction: row-reverse;
• flex-direction: column-reverse;

• Row təyinatı standart təyinatdır . Blokları soldan sağa doğru ( sətir üzrə ) düzür
• Column təyinati blokları yuxarıdan aşağı ( sütün üzrə ) düzür
• Row-reverse təyinatı row təyinatının tam əksidir
• Column-reverse təyinatı isə column təyinatının tam əksidir

Digər brauzerlər üçün yazılış aşağıdakı kimidir .

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

2. flex-wrap

Bu özəllik blok içindəki elementlərin blokun enliliyini aşdıqda eyni sətirdəmi və ya bir aşağı sətirdəmi yerləşəcəyini təyin edir . 3 təyinat götürür .

• flex-wrap: nowrap;
• flex-wrap: wrap;
• flex-wrap: wrap-reverse;

• Nowrap təyinatı standart təyinatdır . Elementlər blokun genişliyini aşsa da , eyni sətirdə düzülür
• Wrap təyinatında elementlər blokun genişliyini aşan kimi bir alt sətrə keçir
• Wrap-reverse təyinatı eynən wrap kimidir , amma fərq ondadır ki , elementlər ən alt sətirdən başlayaraq düzülür

Digər brauzerlər üçün yazılış aşağıdakı kimidir .

-webkit-flex-wrap: nowrap;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

3. flex-flow

Bu özəllik flex-direction və flex-wrap özəlliklərini bir yerdə yazmaq üçündür . 2 təyinat ötürülür . Birinci təyinat flex-direction-ın aldığı təyinat , ikinci təyinat isə flex-wrap-ın aldığı təyinatdır . Məsələn :

flex-flow: row wrap;

4. justify-content

Bu özəllik blok içindəki elementlərin horizontal olaraq nece düzüləcəyini təyin edir .

• justify-content: flex-start;
• justify-content: flex-end;
• justify-content: center;
• justify-content: space-around;
• justify-content: space-between;

• Flex-start təyinatında blok içindəki elementlər soldan sağa doğru düzülür
• Flex-end təyinatında blok içindəki elementlər sağdan sola doğru düzülür
• Center təyinatında blok içindəki elementlər ortalanır
• Space-around təyinatında blok içindəki elementlər soldan və sağdan bərabər ölçüdə məsafə saxlayaraq düzülür
• Space-between təyinatında blok içindəki elementlər sola və sağa sıxılaraq düzülür

Digər brauzerlər üçün yazılış aşağıdakı kimidir

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

5. align-items

Bu özəllik blok içindəki elementlərin vertical olaraq nece düzüləcəyini təyin edir .

• align-items: flex-start;
• align-items: flex-end;
• align-items: center;
• align-items: stretch;
• align-items: baseline;

• Flex-start təyinatında blok içindəki elementlər yuxarıya sıxılaraq düzülür
• Flex-end təyinatında blok içindəki elementlər aşağıya sıxılaraq düzülür
• Center təyinatında blok içindəki elementlər yuxarı və aşağıya nəzərən eyni məsafədə boşluq buraxaraq ortada yerləşir
• Stretch təyinatında blok içindəki elementlər blokun hündürlüyünə görə hər elementin eyni hündürlükdə blokda yerləşməsini təyin edir . Hündürlüyü blokun hündürlüyünü tutur
• Baseline təyinatı blok içindəki elementləri , elementlərin içindəki ilk sətrə əsasən yerləşməsinə imkan edir

Digər brauzerlər üçün yazılış aşağıdakı kimidir

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

6. align-content

Bu özəllik blok içindəki tək sətirlik elementlərin yox , çox sətirlik elementlərin nece yerləşəcəyini təyin edir .

• align-content: flex-start;
• align-content: flex-end;
• align-content: center;
• align-content: stretch;
• align-content: space-around;
• align-content: space-between;

• Flex-start təyinatında blok içindəki elementlər yuxarıya sıxılaraq düzülür
• Flex-end təyinatında blok içindəki elementlər aşağıya sıxılaraq düzülür
• Center təyinatında blok içindəki elementlər yuxarı və aşağıya nəzərən eyni məsafədə boşluq buraxaraq ortada yerləşir
• Stretch təyinatında blok içindəki elementlər blokun hündürlüyünə görə hər elementin eyni hündürlükdə blokda yerləşməsini təyin edir . Hündürlüyü blokun hündürlüyünü tutur
• Space-around təyinatı blok içindəki element sətirlərini aralarında eyni məsafə ilə düzür
• Space-between təyinatı blok içindəki element sətirlərinin birincisini yuxarı , axırıncısını aşağı sıxır və qalanları arasında eyni məsafə buraxır

Digər brauzerlər üçün yazılış aşağıdakı kimidir

-webkit-align-content: flex-start;

-ms-flex-line-pack: start;

align-content: flex-start;

Yuxarıdakı özəlliklər əsas elementə ( bloka ) verilən özəlliklər idi . İndi isə blok içindəki elementlərə verilən özəlliklərə baxaq :

1. order

Bu özəllik blok içindəki hər hansı elementi istədiyimiz yerdə yerləşdirməyimizə imkan verir . Təyinat olaraq 1 dən başlayan müsbət tam ədəd götürür . Bu özəlliklə 5-ci sıradakı elementə order: 1; verərək ilk sırada yerləşdirə bilərik .

2. flex-grow

Bu özəllik blok içindəki elementlərə genişlik vermək üçün işlədilir . Məsələn : blok içində 3 elementin olduğunu düşünək . 2 elementə flex-grow: 1; digər 1 elementə isə flex-grow: 3; təyinatını versək , onda təyinatı 3 olan element digər iki elementə görə 3 dəfə genişlənəcək . Təyinat olaraq order kimi natural ədədlər götürülür . Bu özəlliyin standart təyinatı 0-dır .

3. flex-shrink

Bu özəllik isə flex-grow təyinatının tam əksinə blok içindəki elementləri genişlətmək yox , daraltmaq üçün istifadə olunur . Məsələn : blok içində 2 elementin olduğunu düşünək . 1 elementə flex-shrink: 1; digər elementə isə flex-shrink: 2; təyinatını versək , onda təyinatı 2 olan element digər elementə görə 2 dəfə daralacaq . Təyinat olaraq flex-grow və order kimi natural ədədlər götürülür . Bu özəlliyin standart təyinatı 0-dır .

4. flex-basis

Bu özəllik elementin blok içindəki boş qalan yerə görə alacağı standart genişliyini təyin etmək üçün işlədilir . Standart təyinatı auto-dur .

5. flex

Bu özəllik yuxarıdakı 3 özəlliyi ayrı-ayrı yox , bir yerdə yazmaq üçün istifadə olunur . Birinci təyinatı flex-grow , ikinci təyinatı flex-shrink , üçüncü təyinatı isə flex-basis təyinatının aldığı qiymətdir . flex: 0 1 auto;

6. align-self

Bu özəllik flex elementinin digər elementlərə görə fərqli hərəkət etməsini təyin edir . Məsələn , blok içindəki elementlərə align-items: flex-start; təyinatını versək bu elementlər blok içində yuxarıdan başlayaraq düzüləcək . Daha sonra elementlərdən hansısa birinə align-self: flex-end; təyinatını versək onda həmin element aşağıdan başlayaraq düzüləcək .

Sonda Flexboxu dəstəkləyən brauzerlərə baxaq :

• Chrome : 21+ (-webkit- ile), 29+ (-webkitsiz)
• Firefox : 28+
• Internet Explorer : 10(-ms- ilə),11
• Safari : 6.1+(-webkit- ilə)
• Opera : 17+