Решетка с флексбоксове в 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;
}

Всичко работи чудесно, но има някои проблеми, които ще разгледаме в следващия урок.