CSS Dlaždice s automatickou šířkou bloků

V předchozí lekci se v naší dlaždici stávalo, že šířka prvků a jejich odsazení musely dohromady dát šířku rodiče. To není zcela univerzální. Udělejme to tak, aby se prvky automaticky přizpůsobovaly šířce rodiče.

Předpokládejme, že máme takového rodiče:

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

Předpokládejme, že prvky této dlaždice jsou uspořádány po 4 blocích v řadě:

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

Nastavme šířku našich bloků tak, aby každý z nich zabíral čtvrtinu rodiče. K tomu nastavme jejich velikost na 25%:

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

Nastavte blokům šířku v procentech tak, aby se v dlaždici uspořádaly tři bloky v řadě.

Nastavte blokům šířku v procentech tak, aby se v dlaždici uspořádaly dva bloky v řadě.

Nastavte blokům šířku v procentech tak, aby se v dlaždici uspořádal jeden blok v řadě.