Flise med automatisk blokbredde i CSS

I den forrige lektion i vores flise endede det med, at bredden af elementerne og deres margener samlet skulle give forælderens bredde. Dette er ikke helt universelt. Lad os gøre det sådan, at elementerne automatisk tilpasser sig efter forælderens bredde.

Lad os sige, at vi har en forælder som denne:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

Lad elementerne i denne flise stå med 4 blokke i træk:

.child {
	box-sizing: border-box;
	width: 200px;
	height: 100px;
	border: 1px solid green;
}

Lad os indstille bredden på vores blokke, så hver af dem optager en fjerdedel af forælderen. For at gøre dette sætter vi deres størrelse til 25%:

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

Indstil blokkenes bredde i procenter, så der kommer tre blokke i træk i flisen.

Indstil blokkenes bredde i procenter, så der kommer to blokke i træk i flisen.

Indstil blokkenes bredde i procenter, så der kommer én blok i træk i flisen.