Плитка дар CSS бо истифода аз флекс

Биёед акнун биомӯзем, ки чӣ тавр дар флексбоксҳо плитка сохтан мумкин аст. Аввалан, блокҳои флексро ба чанд саф, се блок дар як саф, ҷойгир мекунем.

Барои ин ба волидайни флексҳо паҳноии 300px ва flex-wrap-ро дар қимати wrap муқаррар мекунем, ва ба фарзандон паҳноии 100px медиҳем:

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

Биёед акнун байни блокҳои худ дар уфуқӣ фосила созем. Барои ин паҳноии волидайнро зиёд мекунем, то фосилаи иловагӣ барои ҳошияҳо фароҳам оварда шавад.

Азбаски мо дар як саф се блок дорем, маънои ин он аст, ки байни онҳо ду фосила мавҷуд аст. Фарз мекунем, ки мо мехоҳем, ки ҳар як фосила паҳноии 10px дошта бошад. Ин маънои онро дорад, ки паҳноии волидайнро ба 20px зиёд кардан лозим аст, яъне ба 320px на 300px.

Биёед акнун ба волидайни блокҳо хосияти justify-content-ро дар қимати space-between таъин кунем ва фосилаи дилхоҳро ба даст орем:

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

Биёед акнун ҳамон фосиларо байни блокҳо дар амудӣ низ илова кунем. Барои ин метавон хосияти align-content-ро дар қимати space-between таъин кард.

Аммо барои ин ба волидайн баландиро таъин кардан лозим аст, вагарна align-content кор нахоҳад кард. Биёед баландиро ба 320px муқаррар кунем. Дар ин ҳолат, мо дақиқан се саф блокҳо бо баландии 100px плюс ду ҳошияи байнисафӣ дар 10px ҷойгир карда метавонем.

Биёед иҷро кунем:

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

Ҳама чиз аҷиб кор мекунад, аммо баъзе мушкилиҳо мавҷуданд, ки мо онҳоро дар дарси оянда баррасӣ мекунем.