CSS-də Flexbox modeli
Css-də Flexbox modeli nədir?Nə üçün istifadə olunur?Üstünlükləri nələrdir?
Bugünkü yazımızda CSS-də gəldiyi gündən bəri işləri bir xeyli rahatlaşdıran Flexbox modeli barədə danışacağıq.
Flexbox hərfi tərcümədə “elastik qutu”(Flex-elastik,box-qutu) deməkdir.Flexboxdan öncə qutuları mövqeləndirmək çətin idi,lakin Flexbox sayəsində bunu həm şaquli,həm də üfüqi vəziyyətdə əlimizlə qoyubmuş kimi mövqeləndirə bilirik.
Gəlin,bu qutuları həm adi Css özəllikləri ilə,həm də Flexbox ilə ilk haldan ikinci hala gətirməyə çalışaq.
Adi Css özəlliklərində hər bir qutuya ayrıca və ya ortaq siniflərinə “display :inline-block” xüsusiyyəti verməliyik.
HTML
<div class="box">Item1</div><div class="box">Item2</div><div class="box">Item3</div>CSS.box{
display:inline-block;
}
Flexbox modelində isə onları əhatəsinə alan bir ana qutu(“container”) yaradırıq,həmin qutuya “display:flex” xüsusiyyəti veririk.
HTML
<div class="container"> <div class="flexbox-item flexbox-item1">Item 1</div> <div class="flexbox-item flexbox-item2">Item 2</div> <div class="flexbox-item flexbox-item3">Item 3</div></div>
CSS
.container{display:flex;}
Deməli,Flexbox modeli iki parçaya ayrılır :
Flex Container(Kiçik qutuları əhatəsinə alan ana qutu)
Flex Items(Ana qutunun içindəki kiçik qutular)
Əvvəlcə ana qutunun özəlliklərinə baxaq.
flex-direction
row(defolt olaraq)
row-reverse
column
column-reverse
Css Flexbox modelində biz qutuları həm sətir,həm də sütun üzrə düzə bilərik.Bu modeldə defolt olaraq(“default” — İstifadəçi toxunmadıqda proqramın avtomatik işlədəcəyi dəyər) qutular sətir üzrə düzülür ,yəni aşağıdakı kodu yazmağımıza ehtiyac yoxdur,proqram özü onu “display:flex” yazdığımız anda avtomatik edir.
.container{
display:flex;
flex-direction: row;
}Bəs elementləri brauzerin sağ pəncərəsindən başlayıb düzmək istəsək?Onda “row-reverse” dəyərindən istifa edirik:
.container{
display:flex;
flex-direction:row-reverse;
}Sətir olaraq düzməyi bildik,bəs sütun olaraq?Əgər elementləri sütun olaraq düzmək istəyiriksə, “column” dəyərindən istifadə edəcəyik.
.container{
display:flex;
flex-direction:column;
}Bəs sətirdə etdiyimiz kimi yenə tərsinə düzmək istəsək?Bu zaman “column-reverse” dəyəri yardımımıza yetir.
.container{
display:flex;
flex-direction:column-reverse;
}flex-wrap
nowrap(defolt dəyər)
wrap
wrap reverse
Flexbox modelində elementləri sətir və ya sütun olaraq düzərkən qutuların ölçüsü böyük və ya sayı çox olduqda container-dan daşma və ya onun içində daralma olması mümkündür
Gördüyünüz kimi brauzeri kiçiltdikdə içəridə daralmalar baş verir,container-dan daşma halları görünür və bu da xoşagəlməz bir görüntü yaradır.Bəs bunun qarşısını necə ala bilərik?
Bunun üçün “flex-wrap” parametrindən istifadə edəcəyik.
.container{
display: flex;
flex-wrap:wrap ;
flex-direction: row;
}
.container{
display: flex;
flex-wrap:wrap ;
flex-direction: column;
}Bəs sətir olaraq aşağı düşməsini və ya sütun olaraq sağa keçməsini deyil də,yuxarı çıxmasını və ya sola keçməsini istəsək,nə edə bilərik?O zaman da
“wrap-reverse” dəyərini işlədə bilərik :
.container{
display: flex;flex-wrap:wrap-reverse ;flex-direction: row;
}
.container{
display: flex;flex-wrap:wrap-reverse ;
flex-direction: column;
}Yuxarıda dediyimiz iki parametri(flex-direction və flex-wrap) tək bir parametrin altında işlətmək də mümkündür,hansı ki “flex-flow” adlanır.
.container{
display: flex;flex-flow: column wrap;
}
Daha öncə də dediyimiz kimi flexbox modelini biz iki cür idarə edə bilərik :
- üfüqi(x oxu)
- şaquli(y oxu)
Flexbox modelində defolt olaraq sətir üzrə düzülmə olur.Sətir üzrə düzülmədə üfüqi vəziyyətə “justify-content”,şaquli vəziyyətə isə “align-items” nəzarət edir.
Əgər biz buna müdaxilə etsək və qutuların sütun üzrə düzülməsini istəsək,şaquli vəziyyətə “justify-content”,üfüqi vəziyyətə isə “align-items” nəzarət edəcək.
İndi isə gəlin,bu parametrləri ayrı-ayrı təhlil edək (“flex-direction:row;” vəziyyəti üçün)
justify-content
flex-start(defolt dəyər)
flex-end
center
space-between
space-around
space-evenly
Bizim elementlərimiz sətir olaraq düzüldükdə onların üfüqi vəziyyətinə “justify-content” nəzarət edir və düzülüş defolt olaraq “container”-ın sol üst hissəsindən başlayır.Bu da “flex-start” dəyərinin işləndiyini göstərir:
Bəs biz qutuları sağa doğru düzmək istəsək?Burda diqqətli olmaq lazımdır,biz sağdan düzmək istəmirik.İstəyirik ki,sonuncu qutumuz “container”-ın sağına doğru yapışsın(“margin-right” parametrinin icazə verdiyi qədər).Yəni biz sadəcə hərəkət etdirmək istəyirik,düzülüş sırasını dəyişdirmək yox.
.container{display: flex;justify-content: flex-end;}
Düzülüş sırasını dəyişmək üçün isə yuxarıda dediyimiz kimi “flex-direction : row-reverse” istifadə edəcəkdik.
Bəs biz bu qutuları sətrin ortasına gətirmək istəsək?O zaman aşağıdakı kimi edəcəyik :
.container{display: flex;justify-content: center;}
Biz bu qutuların arasında bərabər boşluqlar qoymaq istəsək,nə edə bilərik?Bunun üçün 3 cür dəyərimiz var :
- space-between
- space-around
- space-evenly
space-between
Əgər biz ilk və son qutunu “container”-ın müvafiq olaraq sol və sağ hissəsinə yapışdırmaq (“margin” parametrinin icazə verdiyi qədər) və bütün qutuların arasında bərabər boşluqlar olmasını istəyiriksə, “space-between” dəyərini işlədə bilərik :
.container{display: flex;justify-content: space-between ;}
space-around
Bəs ilk və son qutunun da “container”-in kənarlarından müəyyən boşluqla ayrılmasını istəsək?O zaman “space-around” dəyərindən istifadə edə bilərik :
.container{display: flex;justify-content: space-around;}
Aha,gözləriniz sizi yanıltmır,qutular ilə kənarlar arası boşluqların qutular arası boşluqlara nisbəti 1:2 -dir.
space-evenly
Əgər boşluqların hamısının bərabər olmasını istəyiriksə, “space-evenly” dəyəri tam bizim istəyimizə uyğundur.
.container{display: flex;justify-content: space-evenly;}
align-items
stretch(defolt dəyər)
center
flex-start
flex-end
baseline
stretch
Biz sətir olaraq düzülüşdə üfüqi idarə üçün “justify-content” istifadə etdik,bəs şaquli olaraq necə idarə edə bilərik?Bu zaman biz “align-items” parametrindən istifadə edəcəyik. “align-items” parametri defolt olaraq “stretch” dəyəri qəbul edir.Əgər heç bir qutunun uzunluğu daxil edilməyibsə,qutular “container”-in uzunluğuna görə özlərini uzadır:
.container{
display: flex;
justify-content: space-between;
height: 400px;
align-items:stretch;}Hansısa bir qutunun uzunluğunu daxil edəndə əgər digər qutulardan daha uzundursa və “container”-in dəqiq uzunluğu verilməyibsə, “container” və bütün qutular özlərini həmin qutuyya görə uzadır;
.container{
display: flex;
justify-content: space-between;
align-items:stretch;}
.flexbox-item1{
height: 250px;}Yox,əgər “container”-in dəqiq uzunluğu verilibsə,uzunluğu verilməyən qutular özlərini “container”-in uzunluğuna görə uzadır :
.container{
display: flex;
justify-content: space-between;
align-items:stretch;
height: 400px;}.flexbox-item1{height: 250x;}
.container{
display: flex;
justify-content: space-between;
align-items:stretch;
height: 400px;}.flexbox-item1{height: 500px;}
center
Əgər biz qutularımızı şaquli olaraq mərkəzə yığmaq istəyiriksə,bunun üçün “center” dəyərini işlədə bilərik.
.container{
display: flex;
justify-content: space-between;
height: 400px;
align-items:center;}Bu halda uzunluğu olmayan qutular “container”-in və digər qutuların uzunluğundan asılı olmur.
.container{
display: flex;
justify-content: space-between;
align-items:center;}
.flexbox-item1{
height: 300px;}flex-start
Əgər biz qutuları yuxarıya doğru aparmaq istəyiriksə,bu dəyəri istifadə edə bilərik.
.container{
display: flex;
justify-content: space-between;
align-items: flex-start;
height: 300px;}flex-end
Əgər biz qutuları aşağıya doğru aparmaq istəyiriksə,bu dəyəri istifadə edə bilərik.
.container{
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 300px;}baseline
Əgər qutuların ilk sətirlərinin eyni cərgədə olmağını istəyiriksə “baseline” dəyəri işimizə yarayacaqdır.Bunu görmək üçün bir qutunun genişliyini limitləyək və yazının font dəyərini artıraq,bu zaman ikinci sətrə düşmələr olacaqdır :
.container{
display: flex;
justify-content: space-between;
align-items: baseline;
}
.flexbox-item1{
width: 200px;
font-size: 100px;
}
align-content
Bu parametr tək sətirli flexbox modellərinə təsir etmir
stretch(defolt dəyər)
center
flex-start
flex-end
space-between
space-around
Əgər biz flexbox modelimizə “flex-wrap :wrap” özəlliyini vermişiksə,onda aşağıdakı kimi sətirlər yaranacaq:
stretch
Bəs bu sətirlər arası idarəni necə edəcəyik?Bunun üçün “align-content” parametrini istifadə edə bilərik.Defolt olaraq “stretch” dəyəri verilir və “container”-in hər sütunu o sütundakı qutular arasında yuxarıdakı kimi bərabər olaraq bölüşürlər(Əgər hündürlükləri verilməyibsə).
center
Əgər sətirləri ortalamaq istəsək, “center” dəyərindən istifadə edə bilərik :
.container{
display: flex;
align-content: center;
}flex-start
Sətirləri yuxarıya doğru qaldırmaq üçün “flex-start” dəyərindən istifadə edə bilərik :
.container{
display: flex;
align-content: flex-start;
}flex-end
Sətirləri aşağıya doğru endirmək üçün “flex-start” dəyərindən istifadə edə bilərik :
space-between|space-around
Bu dəyərlərin nə anlam ifadə etdiyini yuxarıdakı “justify-content” hissəsindən tapa bilərsiniz.Qutumuzu 90 dərəcə çevirib eyni şeyi edirmişik kimi düşünün:
Flexbox Items
order
flex-grow
flex-shrink
flex-basis
align-self
Yuxarıda flexbox modelinin ana qutusu(“container”) və onun özəllikləri barədə məlumatlar əldə etdik.İndi isə o qutunun içindəki qutulara(“items”) və onların parametrlərinə nəzər yetirək.
order
Əgər biz qutuların yerlərini HTML strukturuna toxunmadan bir-biriylə dəyişdirmək istəyiriksə, “order” parametrini işlədə bilərik :
.flexbox-item1{
order: 3;}
.flexbox-item2{
order: 2.5;}
.flexbox-item3{
order: -177;}
.flexbox-item4{
order: 2;}Koddan da gördüyümüz kimi rəqəmin fərqi yoxdur,hansı qutuya verilən “order” dəyəri ən kiçikdirsə,o soldan birinci olur(təbii ki “row-reverse” halında olmadığını düşünərək)
flex-grow
Əgər biz qutuya genişlik vermişiksə,o özü genişlənib bütün “container”-i tutmağa çalışmayacaq :
.flexbox-item1{
width: 120px;
}Bəs biz bunu necə edə bilərik?O zaman gəlin, “flex-grow” parametrinə göz ataq :
.flexbox-item1{
flex-grow: 1;
width: 120px;
}Tək qutu olduğu üçün verilən dəyərin önəmi yoxdur,istənilən ədədi ötürə bilərik.Gəlin,eyni “container”-i iki qutu arasında bölüşdürək :
.flexbox-item1{
flex-grow: 13;
width: 120px;
}
.flexbox-item2{
flex-grow :13;
width : 120px;
}Gördüyünüz kimi,yenə də rəqəmin fərqi olmadı.Çünki nisbətləri yenə eynidir,hər ikisinə eyni dəyəri verdiyimiz müddətcə bərabər olaraq qutunu bölüşdürəcəklər.
Gəlin,qutuların sayının daha çox olduğu başqa nümunəyə baxaq :
.container{
width: 1000px;
align-items: center;
justify-content: space-between;
}
.flexbox-item{
width: 150px;}
.flexbox-item2{
flex-grow: 3;}
.flexbox-item3{
flex-grow: 2;
}“flex-grow” dəyəri daxil edilməyən qutuların dəyəri defolt olaraq “0”-dır.Gördüyünüz kimi, “flex-grow” parametri “justify-content”-in dəyərini təsirsizləşdirdi,boşluq olmadı.Gəlin,ölçülərə baxaq :
“Aa,Məhəmmədd,390 və 310 3:2 nisbətində deyil axı” dediyinizi eşitmiş kimiyəm.Siz də mənim kimi bir işin arxa planda necə hesablandığını görməyi sevənlərdənsiniz?Onda getdik :
flex-grow hesablanması
- Əvvəlcə “container”-ın genişliyinə baxaq : 1000px
- Sonra qutularımızın sayına baxaq : 4
- Sonra qutularımızın ortaq sinfində verilən genişliyə baxaq :150px
Deməli,hər bir qutunun minimum 150px genişliyi var. “flex-grow:0” olan halda aşağıdakı kimi 400px boşluq qalacaqdı :
Deməli, yayılmaq üçün toplam 400px genişlik var.Burdan da “flex-grow : 0” olmayan qutuların “flex-grow” dəyərlərini götürüb 400-ü həmin nisbətdə bölürük :
Burdan da gördüyümüz kimi hər genişlik üçün uyğun olan ölçünü qutuların “flex-grow” dəyərinə uyğun olaraq böldük və o qutuların üzərinə əlavə etdik :
flex-shrink
Yuxarıda genişlənmədən bəhs etdik,indi isə gəlin, kiçilmə vaxtı baş verənləri dəyişdirməyə çalışaq.Bunun üçün “flex-shrink” parametrindən istifadə edirik.
.flexbox-item1{
flex-shrink: 2;
}Bu parametr sayəsində biz brauzeri kiçildəndə qutuların kiçilmə tezliyini ayarlaya bilirik.Aşağıdakı nümunəyə baxaq :
.container{
display: flex
width: 800px;
}
.flexbox-item1{
width: 300px;
flex-shrink: 4;
}
.flexbox-item2{
flex-shrink: 6;
width: 600px;
}Gördüyünüz kimi 300px və 600px genişlikli 2 qutu vermişik,lakin onların cəmi onları əhatə edən “container”-i aşdığı üçün iki qutu da kəsilmə baş vermiş,275 və 525px genişliyə enmişlər.Bu ədədlərin necə alındığına gəlin birlikdə baxaq :
flex-shrink hesablanması
- Əvvəlcə iki qutunun genişlikləri cəmini tapaq :
300+600=900
- Sonra əsas qutunun genişliyini çıxaq və “artıq hissə” adlandıraq :
900–800 = 100
- Ardından hər qutunun genişliyini öz “flex-grow” dəyərinə vuraq,toplayaq böyük cəm” adlandıraq:
300*4+600*6 = 4800
- Hər bir qutunun “flex-grow” dəyəriylə genişliyinin hasilini böyük cəmə nisbətini tapaq :
300*4/4800 = 0.25
600*6 /4800 = 0.75
- İndi yuxarıda aldığımız 0.25 və 0.75 dəyərlərini artıq hissəyə vuraq və uyğun olan qutuların genişliklərindən çıxaq :
300–100*0.25= 275
600- 100*0.75 = 525
Biz brauzeri kiçiltdikdə də belə formada olur.Əgər əhatə edən qutunun genişliyi onun içindəki qutuların əvvəlcədən verilmiş genişliyindən aşağı düşürsə,yuxarıdakı düsturla bir hesablama aparılır və qutular yenidən özlərini əsas qutuya görə uyğunlaşdırır.
flex-basis
Əvvəlcədən ölçü təyin etmək üçün “flex-basis” parametrindən istifadə edə bilərik :
.flexbox-item{
width : 250px}
.flexbox-item1{
flex-basis: 50%;}
.flexbox-item2{
flex-basis: 400px;
}Əgər “flex-basis” parametri varsa,o “width” parametrini əzir :
.flexbox-item{
width : 250px}
.flexbox-item1{
flex-basis: 50%;}
.flexbox-item2{
flex-basis: 400px;
width : 230px;
}Yuxarıda gördüyümüz son 3 parametri tək “flex” parametrinin altında birləşdirmək mümkündür:
flex : flex-grow|flex-shrink|flex-basis
align-self
Şaquli olaraq tək sətri “align-items” ilə,birdən çox sətir olduğu halda isə sətirlər toplusunu “align-content” ilə idarə edirdik.Bəs hər bir qutunu ayrıca idarə edə bilərikmi?Bəli,edə bilərik.Bunun üçün “align-self” parametri ilə tanış olaq.
Flexbox modelində “align-self” “align-items” parametrinin dəyərini əzən bir parametrdir.Yəni əgər qutunun ayrıca “align-self”-i varsa,“container”-da daxil etdiyimiz dəyər “align-items” parametrinin dəyəri işlənilmir.Buna obyekt yönümlü proqramlaşdırmadakı “Override” məntiqi kimi də baxmaq olar.
.flexbox-item1{
align-self: flex-start;
}
.flexbox-item3{
align-self: flex-end;
}
.container{
align-items: center;}Sütun üzrə düzülüşdə flexbox modeli
Yazımızın əvvəllərində “Flexbox modelində qutular həm sətir üzrə,həm də sütun üzrə düzülə bilir” demişdik.Yuxarıda funksiyaların sətir üzrə nə etdiklərinə baxdıq,indi gəlin sütun üzrə düzülüşdə nə etdiklərinə göz ataq.Narahat olmayın,sətir qədər uzun yazı olmayacaq,çünki nə iş gördüklərini yetərincə anlatdıq və sadəcə qutumuzu 90 dərəcə çeviribmiş kimi qısa-qısa izah edəcəyik :)
Bu şəkli bir daha xatırlamağınızda fayda var.Sütun üzrə düzülüşdə də parametrlər eynidir,sadəcə orda şaquli formada idarə edən parametr burda üfüqi formada ,üfüqi formada idarə edən parametr isə şaquli formada idarə edəcək.
align-items
Əgər biz heç bir dəyər daxil etməsək,defolt olaraq “stretch” dəyəri aktiv olur,yəni element öz sətrinin tamamına yayılır(Sətir olaraq düzülüşdə öz sütununun tamamını tuturdu)
Diqqət! Əgər biz hər hansısa genişlik verməmişiksə.
.container{
display: flex;
flex-direction: column;
}
.container{
display: flex;
flex-direction: column;
align-items: center;}
.container{
display: flex;
flex-direction: column;
align-items: flex-end;}
.container{
display: flex;
flex-direction: column;
align-items: flex-start;justify-content
Bu parametr sayəsində biz sütun üzrə düzülüşdə qutuların şaquli hərəkətinə nəzarət edə bilərik,defolt olaraq “flex-start” dəyəri saxlayır :
.container{
display: flex;
flex-direction: column;
}
.container{
display: flex;
flex-direction: column;
justify-content : center}
.container{
display: flex;
justify-content : flex-end;
}Sətirlər arası məsafələr
Sətirlər arası məsafə təyin etmək üçün yardımımıza 3 cür dəyər yetişir :
- space-between
- space-around
- space-evenly
Bu dəyərlərin qoyduğu boşluqların məntiqini yuxarıda — sətir üzrə düzülüşdə anlatmışdıq.Sütun üzrə düzülüşdə də eyni nisbət keçərli olacaq.
.container{
display: flex;
flex-direction: column;
justify-content : space-between}
.container{
display: flex;
flex-direction: column;
justify-content : space-around}
.container{
display: flex;
flex-direction: column;
justify-content : space-evenly}flex-wrap
Sətir üzrə düzülüşdə olduğu kimi,sütun üzrə düzülüşdə də sıxışmalar ola bilər :
.container{
align-items: flex-start;
flex-direction: column;
height: 600px;
}
.flexbox-item{
height : 200px;}Bu qutular öz aralarında “container”-i hər biri 75px olmaqla 8 hissəyə böldülər.(Bu hesablamanın necə olduğunu bilmək istəyirsinizsə,yazımızın “flex-shrink hesablanması” hissəsinə göz ata bilərsiniz,heç bir dəyər daxil edilmədikdə “flex-shrink : 1” olduğunu unutmayın)
Bəs biz hər qutunun öz uzunluğuna çatmasını,belə daralmamasını istəyiriksə?O zaman “flex-wrap” istifadə edə bilərik :
.container{
align-items: flex-start;
flex-direction: column;
flex-wrap :wrap;
height: 600px;
}
.flexbox-item{
height : 200px;}Yuxarıdakı kodu “flex-flow” istifadə edərək belə də yaza bilərik :
.container{
align-items: flex-start;
flex-flow : column wrap;
height: 600px;
}
.container{
align-items: flex-start;
flex-direction: column;
flex-wrap :wrap-reverse;
height: 600px;
}
.flexbox-item{
height : 200px;}align-content
Əgər “flex-wrap: wrap” etmişiksə,birdən çox sütun yaranmağı qaçınılmazdır,bəs bunları necə idarə edə bilərik?Sətir üzrə düzülüşdə sətirlər toplusunu “align-content” ilə idarə edirdik,burda da həmin parametr sütunlar toplusunu idarə etmək üçün bizə yardım edəcək.Defolt dəyəri “stretch”-dir :
.container{
align-items: flex-start;
flex-flow: column wrap;
align-content: stretch;
}Gəlin düzülüşə diqqətlə baxaq :
“align-content” defolt olaraq “stretch” dəyəri alır ,“Container” 3 sütun arasında bərabər bölünür.Deməli, “stretch” dəyəri işləyirmiş,sadəcə diqqət etmək lazımdır.
.container{
align-items: center;
flex-flow: column wrap;
align-content: stretch;
}Gördüyünüz kimi, “align-items:center ” desək də,niyəysə bütün qutular ümumi “container”-in ortasına gəlmədi.Niyə?Halbuki aralarında “margin” dəyəri də yoxdur..Aa,diqqət etdinizsə,hər bir qutular toplusu öz böyük sütunlarının içində ortalanıbmış kimi görünür..Yuxarıda da “flex-start” dəyəri işləmir sandıq,halbuki arxa planı bilmirmişik :
Deməli, “align-items” parametri birdən çox sütun olduqda tək bir “container”-a görə yox,o “container” neçə sütuna bölünübsə,hər bir sütuna görə ayrıca işləyirmiş.O cümlədən “justify-content” parametri də(Amma ilk iki sütunda bu bilinməyəcək,çünki şaquli olaraq tərpətmək üçün yer yoxdur).
QEYD : BU BÖLGÜ “align-content:stretch” HALINDA KEÇƏRLİDİR.DİGƏR HALLARDA “align-content” 3 BÖYÜK SÜTUNU AYRI-AYRI YOX,3 ƏDƏD QUTULAR TOPLUSUNU İDARƏ EDİR :
.container{
align-items: flex-start;
flex-flow: column wrap;
align-content: space-between;
}
.container{
align-items: flex-start;
flex-flow: column wrap;
align-content: space-around;
}Sütunlar üzrə düzülüşdə Item`lar
Yuxarıda sütunlar üzrə düzülüşdə “container”-ın parametrlərinə baxdıq,indi isə “item”-ların parametrlərinin necə işlədiyini görək :
order
“order” parametrindən sətir üzrə düzülüşdə elementlərin yerini dəyişdirməkdə istifadə etdiyimiz kimi,sütun üzrə düzülüşdə də istifadə edə bilərik :
.flexbox-item2{
order : 1;
}
.flexbox-item3{
order: -1;}Defolt olaraq “order”-in dəyəri 0-dır.
flex-grow
Biz əgər sütununun tamamını tutmaq istəyiriksə(margin dəyərinin icazə verdiyi qədər), “flex-grow” parametrindən istifadə edə bilərik :
.container{
height:600px;
}
.flexbox-item{
height :130px;}
.flexbox-item2{
flex-grow : 2;}
.flexbox-item3{
flex-grow : 3;}Nəticədə aşağıdakı kimi ölçüləndirmə alındı :
Bu ölçüləndirmənin niyə belə olduğunu detallı halda sətirlər üzrə düzülüş bölməsinin “flex-grow hesablanması” hissəsində detallı halda anlatmışıq,burda da eyni sistemi “width” üçün yox, “height” üçün edirik.
flex-shrink
Əgər qutular kiçiləndə də hansı qutunun daha çox kiçiləcəyini təyin etmək üçün “flex-shrink” dəyərindən istifadə edəcəyik :
.container{
height : 600px;
}
.flexbox-item{
height:170px;
}
.flexbox-item2{
flex-shrink : 2;
}Məlumdur ki,qutuların toplam uzunluğu onları əhatə edən qutudan 80px uzundur və bu zaman qutularda daralmalar baş verir.O vaxt da hansı qutunun “flex-shrink” dəyəri daha böyükdürsə,o daha çox kiçiləcək.Bu ölçü daralması sırf “container”-in sabit uzunluğu var deyə olmaya da bilər,əgər biz brauzeri kiçiltsək,qutuların toplam uzunluğu brauzerin öz uzunluğu keçdiyi üçün yenə daralma baş tutacaq(Yenə “container” kiçilir əslində,sadəcə özünə görə yox,brauzer kiçildiyi üçün).Yuxarıdakı qutuların uzunluqları aşağıdakı kimidir :
Bu ölçülərin niyə belə olduğundan yuxarıda sətirlər barədə danışarkən bəhs etmişdik.İstəyirsinizsə,bir daha baxaq :
- Əvvəlcə hər bir qutuya əvvəlcədən verilən(styling hissəsində) uzunluğu qutuların sayına vuraq :
170*4 = 680 (Toplam qutu uzunluğu)
- İndi isə əhatə edən qutuya verilən uzunluğu yuxarıdakı nəticədən çıxaq:
680–600 = 80(Artıq hissə)
- Sonra da hər bir qutunun “flex-shrink” dəyərini öz uzunluğuna müvafiq olaraq vuraq və toplayaq(“flex-shrink” dəyəri daxil edilməyənlərin dəyəri 1-dir):
170*1+170*2+170*1+170*1 = 850(Böyük cəm)
- İndi isə qutuların hər birinin uzunluğunu öz “flex-shrink” dəyərinə vuraq və böyük cəmə nisbətini tapaq :
170*1/850 = 0.2 (1-ci,3-cü və 4-cü qutu üçün)
170*2/850 = 0.4(2-ci qutu üçün)
- İndi də hər bir qutu üçün onların böyük cəmə olan nisbətiylə artıq hissənin hasilini tapaq :
80*0.2 = 16 (1-ci,3-cü,4-cü qutu üçün)
80*0.4 = 32(2-ci qutu üçün)
- Son olaraq qutuların uzunluğundan yuxarıdakı nəticələri uyğun olaraq çıxaq və ölçüləri tapaq:
170–16 = 154px;(1-ci,3-cü,4-cü qutunun ölçüsü)
170–3 = 138px; (2-ci qutunun ölçüsü)
flex-basis
Qutuların uzunluğunu “flex-basis” parametri ilə təyin edə bilərik :
.flexbox-item2{
flex-basis : 0;}
.container{
height : 600px;}
.flexbox-item{
height : 100px;}
.flexbox-item2{
flex-basis: 300px;
}Və bitdi..Bura qədər oxuduğunuz üçün hər birinizə minnətdaram,növbəti yazılarda görüşmək ümidiylə,xudahafiz!
MƏNBƏLƏR
