Gestionarea elementelor - flex-basis, flex-shrink și flex-grow
Pe lângă proprietățile care stabilesc alinierea elementelor în raport cu marginile flex-containerului, există alte trei proprietăți care permit gestionarea elementelor:
- flex-basis: definește dimensiunea inițială a flex-elementului
- flex-shrink: definește cum se va micșora flex-elementul în raport cu celelalte flex-elemente din flex-container
- flex-grow: definește cum se va mări flex-elementul în raport cu celelalte flex-elemente din flex-container
Flex-basis
Flex-containerul poate crește sau micșora de-a lungul axei sale centrale, de exemplu, la schimbarea dimensiunilor browserului, dacă containerul are dimensiuni nefixate.
Odată cu containerul, pot crește și micșora și flex-elementele sale. Proprietatea flex-basis definește dimensiunea inițială a flex-elementului înainte ca acesta să înceapă să-și schimbe dimensiunea, adaptându-se la dimensiunile flex-containerului.
Această proprietate poate avea următoarele valori:
- auto: dimensiunea inițială a flex-elementului este stabilită automat
- content: dimensiunea flex-elementului este determinată de conținutul său, însă această valoare nu este suportată de toate browserele moderne, deci ar trebui evitată deocamdată
- valoare numerică: putem stabili o valoare numerică specifică pentru dimensiunile elementului
De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox în CSS3</title>
<style>
.flex-container {
display: flex;
border:1px #ccc solid;
}
.flex-item {
text-align:center;
font-size: 1em;
padding: 1.2em;
color: white;
}
.item1 {background-color: #675BA7; flex-basis: auto; width:150px;}
.item2 {background-color: #9BC850; flex-basis: auto; width:auto;}
.item3 {background-color: #A62E5C; flex-basis: 200px;width:150px;}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">Flex Item 1</div>
<div class="flex-item item2">Flex Item 2</div>
<div class="flex-item item3">Flex Item 3</div>
</div>
</html>
Primul element are proprietatea flex-basis setată la valoarea auto. Prin urmare, primul element va folosi valoarea proprietății width pentru dimensiunea reală.
Al doilea element are proprietatea flex-basis setată la valoarea auto, însă și proprietatea width are valoarea auto. Prin urmare, lățimea reală a elementului va fi stabilită în funcție de conținutul său.
Al treilea element are proprietatea flex-basis setată la o valoare specifică, care va fi utilizată. În acest caz, proprietatea width nu mai joacă niciun rol.
flex-shrink
Dacă flex-containerul nu are suficient spațiu pentru a găzdui elementul, comportamentul acestuia poate fi definit prin proprietatea flex-shrink. Aceasta indică modul în care elementul se va micșora în raport cu celelalte elemente.
Proprietatea acceptă un număr ca valoare. Valoarea implicită este 1.
Să analizăm acțiunea acestei proprietăți pe un exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox în CSS3</title>
<style>
.flex-container {
display: flex;
border:1px #ccc solid;
width:400px;
}
.flex-item {
text-align:center;
font-size: 1em;
padding: 1.2em;
color: white;
}
.item1 {background-color: #675BA7; flex-basis: 200px; flex-shrink:1;}
.item2 {background-color: #9BC850; flex-basis: 200px; flex-shrink:2;}
.item3 {background-color: #A62E5C; flex-basis: 200px; flex-shrink:3;}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">Flex Item 1</div>
<div class="flex-item item2">Flex Item 2</div>
<div class="flex-item item3">Flex Item 3</div>
</div>
</html>
În acest caz, lățimea inițială a fiecărui element este de 200px, adică lățimea totală este de 600px. Totuși, lățimea flex-containerului este de doar 400px. Prin urmare, dimensiunea containerului nu este suficientă pentru a conține elementele, așa că intervine proprietatea flex-shrink, care este definită pentru elemente.
Pentru micșorarea elementelor, browserul calculează coeficientul de micșorare (shrinkage factor). Acesta se calculează înmulțind valoarea proprietății flex-basis cu flex-shrink. Astfel, pentru cele trei elemente obținem următoarele calcule:
// primul element
200px * 1 = 200
// al doilea element
200px * 2 = 400
// al treilea element
200px * 3 = 600Astfel, obținem că pentru al doilea element coeficientul de micșorare este de două ori mai mare decât coeficientul pentru primul element. Iar pentru al treilea element coeficientul este de trei ori mai mare decât cel al primului element. Prin urmare, în final, primul element va fi de trei ori mai mare decât al treilea și de două ori mai mare decât al doilea element.
flex-grow
Proprietatea flex-grow controlează extinderea elementelor dacă există spațiu suplimentar în flex-container. Această proprietate este similară cu proprietatea flex-shrink, cu excepția că funcționează în sensul extinderii elementelor.
Proprietatea flex-grow acceptă un număr pozitiv ca valoare, care indică de câte ori elementul va crește în raport cu celelalte elemente la mărirea dimensiunilor flex-containerului. În mod implicit, proprietatea flex-grow este egală cu 0.
Așadar, să utilizăm proprietatea flex-grow:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox în CSS3</title>
<style>
.flex-container {
display: flex;
border:1px #ccc solid;
}
.flex-item {
text-align:center;
font-size: 1em;
padding: 1.3em;
color: white;
}
.item1 {background-color: #675BA7; flex-grow:0;}
.item2 {background-color: #9BC850; flex-grow:1;}
.item3 {background-color: #A62E5C; flex-grow:2;}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">Flex Item 1</div>
<div class="flex-item item2">Flex Item 2</div>
<div class="flex-item item3">Flex Item 3</div>
</div>
</html>Așadar, pentru fiecare element există dimensiuni inițiale de bază. Aici, dimensiunile pentru elemente nu sunt specificate în mod explicit, așa că dimensiunea fiecărui element va fi determinată de conținutul interior, la care se adaugă marginile interioare.
Pe măsură ce containerul se mărește, elementele se vor extinde în funcție de proprietatea flex-grow, care este specificată pentru fiecare element. Spațiul cu care se mărește containerul este considerat spațiu suplimentar.
Deoarece primul element are proprietatea flex-grow egală cu 0, acesta va avea dimensiuni constante. Al doilea element are flex-grow egal cu 1, iar al treilea - 2. Astfel, în total vor da 0 + 1 + 2 = 3. Prin urmare, al doilea element se va mări cu 1/3 din spațiul suplimentar, iar al treilea element va primi 2/3 din spațiul suplimentar.
Proprietatea flex
Proprietatea flex este o combinație a proprietăților flex-basis, flex-shrink și flex-grow și are următoarea sintaxă formală:
flex: [flex-grow] [flex-shrink] [flex-basis]Implicit, proprietatea flex are valoarea 0 1 auto.
Pe lângă valorile specifice pentru fiecare subproprietate, putem seta pentru proprietatea flex una dintre cele trei valori generale:
- flex: none: echivalent cu valoarea 0 0 auto, unde elementul flex nu se întinde și nu se micșorează atunci când containerul crește sau scade
- flex: auto: echivalent cu valoarea 1 1 auto
- flex: initial: echivalent cu valoarea 0 1 auto
Așa, să aplicăm proprietatea flex:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox în CSS3</title>
<style>
.flex-container {
display: flex;
border: 1px #ccc solid;
width: 600px;
}
.flex-item {
text-align: center;
font-size: 16px;
padding: 10px 0;
color: white;
}
.item1 {background-color: #675BA7; width: 150px; flex: 0 0 auto;}
.item2 {background-color: #9BC850; width: 150px; flex: 1 0 auto;}
.item3 {background-color: #A62E5C; width: 150px; flex: 0 1 auto;}
.item4 {background-color: #2A9FBC; width: 150px; flex: 1 1 auto;}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">Flex Item 1</div>
<div class="flex-item item2">Flex Item 2</div>
<div class="flex-item item3">Flex Item 3</div>
<div class="flex-item item4">Flex Item 4</div>
</div>
</body>
</html>
Aici fiecare element are o lățime inițială de 150 de pixeli, deoarece toate elementele au proprietatea flex-basis cu valoarea 0, ceea ce va însuma 600 de pixeli pentru toate elementele.
La comprimarea containerului, se vor micșora elementele 3 și 4, deoarece proprietatea flex-shrink a acestora este mai mare decât zero. Și deoarece această proprietate este egală cu 1 pentru ambele elemente, ele se vor micșora în proporții egale.
La extinderea containerului, se vor mări elementele 2 și 4, deoarece aceste elemente au proprietatea flex-grow mai mare decât zero. Și, de asemenea, deoarece această proprietate este egală cu 1, aceste elemente se vor mări în proporții egale.