Herrangskikking van blokke met media-navrae in CSS

Laat ons leer hoe om herrangskikking van blokke op verskillende skermwydtes uit te voer. As voorbeeld sal ons die volgende gedrag implementeer:

Om te begin, laat ons die HTML-kode van ons blokke skryf:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
</div>

Laat ons nou style vir die ouer van ons blokke skryf:

.parent {
	display: flex;
	width: 90%;
	margin: 50px auto;
	border: 1px solid red;
}

Laat ons nou style vir die blokke self skryf, sonder om die eienskappe te spesifiseer wat sal verander deur media-navrae:

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

Op 'n groot skermwydte, laat die spasie tussen blokke outomaties bereken word:

@media (min-width: 500px) {
	.parent {
		justify-content: space-between;
	}
}

Laat ons die breedte van ons blokke net minder as 50% stel om ruimte te laat vir 'n spasie:

@media (min-width: 500px) {
	.child {
		width: 49.5%;
	}
}

Op 'n klein skermwydte, plaas ons ons blokke in 'n kolom:

@media (max-width: 500px) {
	.parent {
		flex-direction: column;
	}
}

Laat ons 'n onderste spasie aan hulle toewys:

@media (max-width: 500px) {
	.child {
		margin-bottom: 10px;
	}
}

Laat ons alles bymekaar sit en die volgende kode kry:

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

@media (max-width: 500px) {
	.parent {
		flex-direction: column;
	}
	.child {
		margin-bottom: 10px;
	}
}
@media (min-width: 500px) {
	.parent {
		justify-content: space-between;
	}
	.child {
		width: 49.5%;
	}
}

Herhaal die voorbeeld hieronder: