Плочки с автоматична ширина на блоковете в CSS

В предишния урок в нашата плочка се получаваше така, че ширината на елементите и техните отстъпи в сума трябваше да дават ширината на родителя. Това е малко не универсално. Нека направим така, че елементите автоматично да се подстройват под ширината на родителя.

Нека имаме такъв родител:

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

Нека елементите на тази плочка са по 4 блока в ред:

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

Задайте ширината на нашите блокове така, че всеки от тях да заема четвърт от родителя. За това поставете техния размер на 25%:

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

Задайте на блоковете ширина в проценти така, че в плочката да станат три блока в ред.

Задайте на блоковете ширина в проценти така, че в плочката да станат два блока в ред.

Задайте на блоковете ширина в проценти така, че в плочката да става по един блок в ред.