Kontrola sabijanja flex blokova u CSS

Podrazumevano, od svih elemenata se odvajaju parčići, proporcionalno širini elementa. Međutim, moguće je učiniti da se od nekih elemenata odvoje veći ili manji parčići. Za ovo postoji posebno svojstvo flex-shrink.

Ovo svojstvo predstavlja određenu težinu, sa kojom će se množiti širina elementa prilikom izračunavanja parčića koji se odvaja po već navedenoj formuli. Na primer, ako je širina elementa jednaka 200px, a njegov flex-shrink je 3, onda će ponderisana (dakle pomnožena težinom) širina elementa biti jednaka:

200px * 3 = 600px

Formula uzimajući u obzir flex-shrink će izgledati ovako: neg. slobodan prostor * (ponderisana širina elementa / zbir svih ponderisanih širina elemenata).

Pogledajmo na primeru. Neka imamo 4 elementa. Neka je širina prvog elementa 400px, a flex-shrink jednak 2, širina preostalih elemenata - 200px, a njihov flex-shrink je jednak 1. Neka je širina roditelja 900px.

Zbirna širina elemenata je:

400px + 3 * 200px = 1000px

Negativni slobodan prostor biće jednak:

1000px - 900px = 100px

Zbirna ponderisana širina elemenata je:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

Ponderisana širina prvog elementa je:

400px * 2 = 800px

Od prvog elementa će se odvojiti sledeći parčić:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

Širina elementa biće jednaka:

400px - 57.14px = 342.86px ~ 343px

Ponderisana širina svakog od preostalih elemenata je:

200px * 1 = 200px

Od svakog elementa će se odvojiti sledeći parčić:

200px * (200px / 1400px) = 200px * 0.1428 = 28.56px / 3 ≈ 14.2px

Širina elementa biće jednaka:

200px - 14.2px = 185.8px ~ 186px

Implementirajte opisane blokove i proverite merenjem, da li je širina elemenata zaista jednaka onoj koju smo izračunali.

Izračunajte širinu blokova, a zatim proverite izračune merenjem:

<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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-shrink: 2;
}
.elem2 {
	width: 100px;
	flex-shrink: 1;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

Izračunajte širinu blokova, a zatim proverite izračune merenjem:

<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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-shrink: 3;
}
.elem2 {
	width: 100px;
	flex-shrink: 2;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

Izračunajte širinu blokova, a zatim proverite izračune merenjem:

<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: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-shrink: 3;
}
.elem2 {
	width: 200px;
	flex-shrink: 2;
}
.elem3 {
	width: 200px;
	flex-shrink: 1;
}
.elem4 {
	width: 200px;
	flex-shrink: 1;
}