Zachłanność elementów flex w CSS
Załóżmy, że mamy teraz dwa bloki flex,
ułożone w rzędzie. Tym blokom nadano szerokość
100px, a ich rodzicowi - 300px:
html<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>css.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid green;
}
Результат:
Jak widzisz, łączna szerokość naszych elementów jest mniejsza niż szerokość rodzica, więc po prawej stronie pozostaje pusta przestrzeń.
W razie potrzeby tę pustą przestrzeń można
proporcjonalnie podzielić między naszymi elementami.
Robimy to za pomocą właściwości flex-grow,
nadawanej elementom flex. Wartością tej
właściwości jest bezwymiarowa liczba.
Spójrzmy w praktyce, jak działa ta właściwość.
Przykład
Teraz mamy dwa bloki flex o szerokości
100px. Ich łączna szerokość elementów
wynosi 200px, a szerokość rodzica - 300px.
Okazuje się, że pozostaje wolna przestrzeń
o wymiarach 100px.
Jeśli elementom nie nadano flex-grow,
to po prostu zobaczymy tę wolną przestrzeń.
Jeśli jednak jest ona im nadana, to rzeczywista szerokość elementów
będzie większa niż podana - proporcjonalnie
podzielą wolną przestrzeń między sobą
i dodadzą ją do swojej szerokości.
Załóżmy dla przykładu, że pierwszy element ma flex-grow
równy 1, a drugi - 3. Obliczmy,
jaką część wolnej przestrzeni
otrzyma każdy element.
Na początek należy uzyskać całkowitą liczbę
jednostek flex-grow wszystkich naszych elementów.
Dla pierwszego elementu wynosi ona 1, a
dla drugiego - 3. Oznacza to, że suma
wynosi 4.
Podzielmy teraz 100px wolnej przestrzeni
przez 4 i otrzymamy, że 25px przypada
na jedną jednostkę flex-grow. Okaże się,
że do pierwszego elementu zostanie dodana jedna jednostka
flex-grow, czyli 25px, a
do drugiego - trzy jednostki, czyli
75px.
Szerokość pierwszego elementu wyniesie 125px,
a drugiego - 175px:
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>css.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 3;
}
Результат:
Przykład
Załóżmy teraz, że szerokość rodzica wynosi 400px,
szerokość pierwszego elementu 200px, a szerokość
drugiego elementu - 100px. Okaże się,
że wolna przestrzeń znów
wynosi 100px.
Nadajmy każdemu elementowi flex-grow,
równy 1. W sumie otrzymamy 2,
czyli 100px wolnej przestrzeni
trzeba podzielić przez 2. Okaże się, że
50px przypada na jedną
jednostkę zachłanności.
Ponieważ wszystkie elementy mają tę samą wartość
flex-grow, to do wszystkich elementów zostanie dodana
ta sama wartość wynosząca 50px. Oznacza to,
że pierwszy element stanie się 250px, i
a drugi stanie się 150px:
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>css.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
Результат:
Przykład
Załóżmy ponownie, że szerokość rodzica wynosi 400px,
szerokość pierwszego elementu 200px, a szerokość
drugiego elementu - 100px.
Ustawmy teraz pierwszemu elementowi
flex-grow na wartość 3, a drugiemu
- na wartość 1. Okaże się, że zachłanność
w sumie wynosi 4. Wtedy jedna jednostka
zachłanności równa się 100px / 4 = 25px.
Do pierwszego elementu zostanie dodane 75px,
i stanie się on 275px, a do drugiego -
25px, stanie się 125px:
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>css.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 3;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
Результат:
Zadania praktyczne
We wszystkich poniższych zadaniach zostanie ci przedstawiony
kod z elementami flex, które mają
szerokość i flex-grow. Na podstawie przedstawionego
kodu oblicz, jakie rozmiary będzie miał
każdy z elementów. Następnie uruchom kod
i sprawdź swoje obliczenia, mierząc rzeczywiste
szerokości elementów.
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>css.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 3;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>css.parent {
display: flex;
width: 700px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 200px;
flex-grow: 3;
}
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>css.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
<div class="child elem4">4</div>
</div>css.parent {
display: flex;
width: 1000px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 100px;
flex-grow: 4;
}
.elem4 {
width: 100px;
flex-grow: 3;
}