Placarea cu lățime automată a blocurilor în CSS

În lecția precedentă, în placarea noastră se întâmpla astfel încât lățimea elementelor și marginile lor însumate trebuiau să dea lățimea părintelui. Acest lucru este puțin ineficient. Hai să facem astfel încât elementele să se ajusteze automat la lățimea părintelui.

Să presupunem că avem următorul părinte:

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

Să presupunem că elementele acestei plăci sunt așezate câte 4 blocuri pe rând:

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

Să setăm lățimea blocurilor noastre astfel încât fiecare dintre ele să ocupe un sfert din părinte. Pentru aceasta stabilim dimensiunea lor la 25%:

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

Setați blocurilor lățimea în procente astfel încât în placă să fie trei blocuri pe rând.

Setați blocurilor lățimea în procente astfel încât în placă să fie două blocuri pe rând.

Setați blocurilor lățimea în procente astfel încât în placă să fie câte un bloc pe rând.