CSS-də Flekslərlə Plitə Düzülüşü

Gəlin indi fleksbokslar üzərində plitə düzülüşünü necə etməyi öyrənək. Əvvəlcə fleks bloklarını bir neçə sırada, hər sırada üç blok olmaqla yerləşdirək.

Bunun üçün flekslərin valideyninə eni 300px və flex-wrap xassəsini wrap dəyərində təyin edək, övladlara isə 100px en verək:

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

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Gəlin indi bloklarımız arasında üfüqi boşluq əlavə edək. Bunun üçün boşluq üçün əlavə yer yaratmaq məqsədilə valideynin enini artıraq.

Bizim hər sırada üç blokumuz olduğu üçün, onların arasında iki ara olacaq. Tutaq ki, biz hər aranın eninin 10px olmasını istəyirik. Belə çıxır ki, valideynin enini 20px artırmaq lazımdır, yəni 300px deyil, 320px etmək lazımdır.

Gəlin indi blokların valideyninə justify-content xassəsini space-between dəyərində təyin edək və bloklar arasında istədiyimiz boşluğu əldə edək:

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

.parent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Gəlin indi bloklar arasında şaquli olaraq da eyni boşluğu əlavə edək. Bunun üçün align-content xassəsini space-between dəyərində təyin etmək olar.

Lakin bunun üçün valideynə hündürlük təyin etmək lazımdır, əks halda align-content işləməyəcək. Gəlin hündürlüyü 320px təyin edək. Bu halda bizim hər biri 100px hündürlüyündə üç sıra blok və onların arasında 10px olan iki boşluq yerləşəcək.

Gəlin işə salaq:

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

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Hər şey əla işləyir, lakin növbəti dərsdə nəzərdən keçirəcəyimiz bəzi problemlər var.