Fattore di compressione dei blocchi flex in CSS

Nella lezione precedente abbiamo scoperto che, quando gli elementi flex non hanno spazio sufficiente, iniziano a comprimersi. Lo spazio totale di cui la larghezza combinata eccede la larghezza del genitore è chiamato spazio libero negativo.

Tecnicamente, la compressione significa che da ogni elemento viene "staccato" un pezzetto di larghezza in modo che tutti gli elementi possano adattarsi nel loro genitore.

Facciamo un calcolo. Supponiamo, ad esempio, di avere 4 elementi di larghezza 200px. Supponiamo che la larghezza del genitore sia 700px. Risulta che la larghezza totale degli elementi è:

200px * 4 = 800px

Questa larghezza è di 100px superiore alla larghezza del genitore. Calcoliamo quanto deve essere "staccato" da ogni elemento affinché gli elementi si adattino nel loro genitore:

100px / 4 = 25px

Cioè la larghezza degli elementi sarà:

200px - 25px = 175px

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

Calcola la larghezza dei blocchi, quindi verifica i calcoli con una 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;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}