CSS-de boşluklarsyz reaksiýa beriji taýajyk

Ekran giňligine baglylykda hatarda dürli mukdarda bloklara eýe boljak taýajyk ýasalyň. Biziň almaly boljak netijäniň mysaly:

Ilki HTML kody ýazalyň:

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

Indi bloklaryň enesine stilleri goşalyň:

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

Indi öz bloklara, olaryň giňligini bermän, stilleri belli edeliň:

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

Ekran üýtgende bloklaryň giňligi meýilçilik bilen üýtgemegi üçin olaryň giňligi prosentde bolmalydyr. Şol bir wagtyň özünde, belli bir ekran çäklerinde hatara belli bir mukdarda blok sığışmak üçin bloklaryň giňligini üýtgetmelidiris.

Hatara dört blok ýerleşdirýän kody ýazalyň:

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

Indi hatara üç blok ýerleşdireliň:

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

Indi hatara iki blok ýerleşdireliň:

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

Hatara bir blok:

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

Kodyň hemmesini bilelikde ýygnalyň:

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

Men kody bloklaryň giňligini calc funksiýasy arkaly hasaplanylýan etmek üçin üýtgediň.

Ekran kiçelende ilki hatara dört element, soňra iki element, soňra bolsa bir element sığışýan taýajyk ýasalyň.

Ekran kiçelende ilki hatara alty element, soňra üç element, soňra bolsa bir element sığışýan taýajyk ýasalyň.