Vigeu vya Kurekebishiva bila Mapungufu katika CSS

Wacha tufanye vigeu vya kurekebishiva ambavyo vitakuwa na idadi tofauti za vitalu kwa mstari kulingana na upana wa skrini. Hapa kuna mfano wa kile tunachopaswa kupata:

Wacha kwanza tuandike msimbo wa 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>

Wacha sasa tuongeze mitindo kwa mzazi wa vitalu:

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

Sasa tuweke mitindo kwa vitalu wenyewe, bila kuwapa upana:

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

Ni wazi kuwa upana wa vitalu unapaswa kuwa kwa asilimia, ili kubadilisha skrini vitalu vyabadilike upana wao kwa utulivu. Wakati huo huo katika pointi maalum za skrini tunapaswa kubadilisha upana wa vitalu ili kwa mstari iwezekanavyo idadi maalum ya vitalu hivi.

Wacha tuandike msimbo ambao utaweka vitalu vinne kwa mstari:

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

Na sasa tuweke vitalu vitatu kwa mstari:

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

Na sasa tuweke vitalu viwili kwa mstari:

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

Kizuizi kimoja kwa mstari:

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

Wacha tukusanye msimbo wote pamoja:

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

Badilisha msimbo wangu ili upana wa vitalu uhesabiwe kupitia kitendakazi calc.

Fanya vigeu vya kurekebishiva ambavyo kwa kupungua kwa skrini huanza na vitu vinne kwa mstari, kisha vitu viwili kwa mstari, na kisha kitu kimoja kwa mstari.

Fanya vigeu vya kurekebishiva ambavyo kwa kupungua kwa skrini huanza na vitu sita kwa mstari, kisha vitu vitatu kwa mstari, na kisha kitu kimoja kwa mstari.