CSS'те тышкысыз ылайыктуу тор

Экрандын туурасына жараша катардагы блоктордун саны ар кандай болгон торду жасайлы. Биздин жыйынтыгыбыз ушундай болушу керек:

Алгач HTML кодун жазалы:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
	<div class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
</div>

Эми блоктордун ата-энесине стилдерди кошолу:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}

Эми блоктордун өзүнө стилдерди кошолу, туурасын бербей:

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

Блоктордун туурасы пайыздар менен болушу керек экени анык, экран өзгөргөндө блоктор өз туураларын жылма өзгөртүшү үчүн. Ошол эле учурда, экрандын белгилүү чекиттеринде, биз блоктордун туурасын катарга белгилүү сандагы блок сыяктуу туура өзгөртүшүбүз керек.

Катарда төрт блок турган кодду жазалы:

@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Эми катарда үч блок турсун:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}

Эми катарда эки блок турсун:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}

Катарда бир блок:

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}

Баардык кодду чогултуп алалы:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Менин кодуму өзгөртүңүз, блоктордун туурасы calc функциясы аркылуу эсептелсин.

Торду жасаңыз, экран кичирейгенде алгач катарда төрт элемент, андан кийин эки элемент, анан бир элемент болсун.

Торду жасаңыз, экран кичирейгенде алгач катарда алты элемент, андан кийин үч элемент, анан бир элемент болсун.