Požrešnost flex elementov v CSS

Recimo, da imamo zdaj dva flex bloka, razporejena v vrsto. Tem blokom je določena širina 100px, njihovemu staršu pa - 300px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Kot vidite, je skupna širina naših elementov manjša od širine starša, zato na desni ostane prazen prostor.

Po želji lahko ta prazen prostor proporcionalno razdelimo med naše elemente. To naredimo z lastnostjo flex-grow, ki jo določimo flex elementom. Vrednost te lastnosti je brezdimenzijsko število.

Poglejmo v praksi, kako deluje ta lastnost.

Primer

Zdaj imamo dva flex bloka s širino 100px. Njuna skupna širina elementov je 200px, širina starša pa je 300px. Izkazalo se je, da ostane prost prostor v 100px.

Če elementom ni določen flex-grow, potem bomo preprosto videli ta prostor. Če pa je določen, bo dejanska širina elementov večja od določene - sorazmerno bodo razdelili prost prostor med seboj in ga dodali k svoji širini.

Na primer, naj ima prvi element flex-grow enak 1, drugi pa - 3. Izračunajmo, kolikšen del prostega prostora bo dobil vsak element.

Za začetek moramo dobiti skupno število enot flex-grow vseh naših elementov. Pri prvem elementu je enak 1, pri drugem pa - 3. To pomeni, da je skupaj enak 4.

Razdelimo zdaj 100px prostega prostora na 4 in dobimo, da 25px pripada na eno enoto flex-grow. Izkazalo se bo, da se bo prvemu elementu dodala ena enota flex-grow, to je 25px, in drugemu - tri enote, to je 75px.

Širina prvega elementa bo 125px, drugega pa - 175px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.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;
}

Primer

Naj bo zdaj širina starša enaka 400px, širina prvega elementa 200px, širina drugega elementa pa - 100px. Izkazalo se bo, da je prost prostor spet enak 100px.

Določimo vsakemu elementu flex-grow, enak 1. Skupaj bo 2, to pomeni, da je treba 100px prostega prostora razdeliti na 2. Izkazalo se bo, da 50px pripada na eno enoto požrešnosti.

Ker imajo vsi elementi enako vrednost flex-grow, se bo vsem elementom dodala enaka vrednost v 50px. To pomeni, da bo prvi element postal 250px, in drugi pa 150px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.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;
}

Primer

Naj bo spet širina starša enaka 400px, širina prvega elementa 200px, širina drugega elementa pa - 100px.

Postavimo zdaj prvemu elementu flex-grow na vrednost 3, drugemu pa na vrednost 1. Izkazalo se bo, da je požrešnost skupaj enaka 4. Takrat je ena enota požrešnosti enaka 100px / 4 = 25px.

K prvemu elementu se bo dodalo 75px, in postal bo 275px, k drugemu pa 25px, postal bo 125px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.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;
}

Praktične naloge

V vseh spodnjih nalogah vam bo predstavljena določena koda s flex elementi, ki imajo širino in flex-grow. Glede na predstavljeno kodo izračunajte, kakšne dimenzije bo imel vsak od elementov. Nato zaženite kodo in preverite svoje izračune z merjenjem dejanskih širin elementov.

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.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;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.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;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.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;
}

<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>

.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;
}