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;
}

Плиткада қатарға үш блок болуы үшін, блоктардың енін пайызбен белгілеңіз.

Плиткада қатарға екі блок болуы үшін, блоктардың енін пайызбен белгілеңіз.

Плиткада қатарға бір блок болуы үшін, блоктардың енін пайызбен белгілеңіз.