Плочка со авто-ширина на блокови во 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;
}

Задајте им на блоковите ширина во проценти така што во плочката да има три блока во ред.

Задајте им на блоковите ширина во проценти така што во плочката да има два блока во ред.

Задајте им на блоковите ширина во проценти така што во плочката да има по еден блок во ред.