Плітачка на флексах у 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, гэта значыць зрабіць не 300px, а 320px.

Давайце зараз бацьку блокаў зададзім 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;
}

Усё працуе цудоўна, але ёсць некаторыя праблемы, якія мы разгледзім у наступным уроку.