Бейімді плиточка CSS-те бөлінбестерсіз

Экранның еніне байланысты әртүрлі санындағы блоктары бар плиточка жасайық. Міне, бізде нені алуымыз керектігінің мысалы:

Алдымен 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>

Енді блоктардың ата-анасына стильдерді қосайық:

.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 (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Енді үш блокты қатарға орналастырайық:

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

Енді екі блокты қатарға орналастырайық:

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

Бір блокты қатарға:

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

Барлық кодты бірге жинайық:

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

Менің кодымды блоктардың ені calc функциясы арқылы есептелетіндей етіп өзгертіңіз.

Экран кішірейген кезде алдымен төрт элемент қатар, содан кейін екі элемент қатар, содан кейін бір элемент қатар болатын плиточка жасаңыз.

Экран кішірейген кезде алдымен алты элемент қатар, содан кейін үш элемент қатар, содан кейін бір элемент қатар болатын плиточка жасаңыз.