CSS-flexilaatikoiden kutistumiskerroin

Edellisessä oppitunnissa havaitsimme, että kun flex-elementeillä ei ole tarpeeksi tilaa, ne alkavat kutistua. Sitä, kuinka paljon kokonaisleveys on suurempi kuin vanhemman leveys, kutsutaan negatiiviseksi vapaaksi tilaksi.

Teknisesti kutistuminen tarkoittaa, että kustakin elementistä leikataan pala leveyttä niin, että kaikki elementit mahtuvat vanhempaansa.

Tehdään hieman laskelmia. Oletetaan esimerkiksi, että meillä on 4 elementtiä, joiden leveys on 200px. Oletetaan, että vanhemman leveys on 700px. Tämä tarkoittaa, että elementtien kokonaisleveys on:

200px * 4 = 800px

Tämä leveys on 100px suurempi kuin vanhemman leveys. Lasketaan, kuinka paljon kustakin elementistä on leikattava, jotta elementit mahtuvat vanhempaansa:

100px / 4 = 25px

Eli elementtien leveys on:

200px - 25px = 175px

Toteuta kuvatut lohkot ja tarkista mittauksella, että elementtien leveys on todella yhtä suuri kuin laskemamme.

Laske lohkojen leveydet ja tarkista sitten laskelmat mittauksilla:

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