Adaptiv plitocka olmadan CSS-də

Gəlin sırada ekranın genişliyindən asılı olaraq müxtəlif sayda blok olan bir plitocka edək. Budur, əldə etməli olduğumuz nəticənin nümunəsi:

Əvvəlcə HTML kodu yazaq:

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

İndi gəlin blokların valideyninə stillər əlavə edək:

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

İndi isə blokların özlərinə, onlara eni təyin etmədən, stillər təyin edək:

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

Aydındır ki, blokların eni faizlə olmalıdır ki, ekran dəyişdikdə bloklar öz enlərini hamar şəkildə dəyişsinlər. Eyni zamanda, ekranın müəyyən nöqtələrində biz blokların enlərini elə dəyişməliyik ki, sırada müəyyən sayda bu bloklar yerləşə bilsin.

Gəlin sırada dörd blok yerləşdirəcək kodu yazaq:

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

İndi isə sırada üç blok yerləşdirək:

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

İndi isə sırada iki blok yerləşdirək:

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

Sırada bir blok:

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

Gəlin bütün kodu bir yerə yığaq:

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

Mənim kodumu elə dəyişin ki, blokların eni calc funksiyası vasitəsilə hesablansın.

Elə bir plitocka edin ki, ekran kiçildikdə əvvəlcə sırada dörd element, sonra iki element, daha sonra isə bir element olsun.

Elə bir plitocka edin ki, ekran kiçildikdə əvvəlcə sırada altı element, sonra üç element, daha sonra isə bir element olsun.