Regolazione della compressione dei blocchi flex in CSS

Per impostazione predefinita, da tutti gli elementi vengono "pizzicati" pezzi proporzionali alla larghezza dell'elemento. Tuttavia, è possibile fare in modo che da alcuni elementi vengano pizzicati pezzi più grandi o più piccoli. A questo scopo esiste una proprietà speciale flex-shrink.

Questa proprietà rappresenta un certo peso, per il quale verrà moltiplicata la larghezza dell'elemento nel calcolo del pezzo da pizzicare secondo la formula già vista sopra. Ad esempio, se la larghezza di un elemento è 200px, e il suo flex-shrink è 3, allora la larghezza ponderata (cioè moltiplicata per il peso) dell'elemento risulterà:

200px * 3 = 600px

La formula che tiene conto di flex-shrink avrà la seguente forma: spazio libero negativo * (larghezza ponderata dell'elemento / somma di tutte le larghezze ponderate degli elementi).

Vediamo un esempio. Supponiamo di avere 4 elementi. Lascia che la larghezza del primo elemento sia 400px, e flex-shrink sia 2, la larghezza degli altri elementi - 200px, e il loro flex-shrink sia 1. Lascia che la larghezza del genitore sia 900px.

La larghezza totale degli elementi è:

400px + 3 * 200px = 1000px

Lo spazio libero negativo sarà:

1000px - 900px = 100px

La larghezza ponderata totale degli elementi è:

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

La larghezza ponderata del primo elemento è:

400px * 2 = 800px

Dal primo elemento verrà pizzicato il seguente pezzo:

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

La larghezza dell'elemento sarà:

400px - 57.14px = 342.86px ~ 343px

La larghezza ponderata di ciascuno degli altri elementi è:

200px * 1 = 200px

Da ciascun elemento verrà pizzicato il seguente pezzo:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

La larghezza di ogni elemento sarà:

200px - 14.2px = 185.8px ~ 186px

Implementa i blocchi descritti e verifica con la misurazione che la larghezza degli elementi sia effettivamente uguale a quella da noi calcolata.

Calcola la larghezza dei blocchi, quindi verifica i calcoli con la misurazione:

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

Calcola la larghezza dei blocchi, quindi verifica i calcoli con la misurazione:

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

Calcola la larghezza dei blocchi, quindi verifica i calcoli con la misurazione:

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