Kifurushi kinachobadilika na Vipimo kwenye CSS

Sasa tufanye kifurushi chenye vipimo. Huu ni mfano wa kile tunachotakiwa kufikia:

Kwanza tufanye mitindo kwa mzazi wa vizuia:

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

Sasa tuweke mitindo kwa vizuia vyenyewe, bila kuwapa upana, lakini tukiwapa ukingo wa chini kwa asilimia:

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

Sasa tuandike msimbo ambao utaweka vizuia vinne kwenye mstari mmoja, ukiweka viingilio vinavyofanana:

@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

Sasa tuweke vizuia vitatu kwenye mstari mmoja:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}

Sasa tuweke vizuia viwili kwenye mstari mmoja:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}

Kizuia kimoja kwenye mstari mmoja:

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

Sasa tukusanye msimbo wote pamoja:

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

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

Tengeneza kifurushi ambacho kinapopunguzwa skrini kitakuwa na vitu nane kwenye mstari mmoja kwanza, kisha vitu vinne kwenye mstari mmoja, kisha vitu viwili kwenye mstari mmoja. Acha nafasi kati ya vitu iwe 0.75%.

Badilisha shida iliyotangulia ili nafasi kati ya vitu iwe thabiti ya thamani ya 20px.