Решетка с флексбоксове в CSS

Нека сега се научим да правим решетка с флексбоксове. Като начало ще подредим флекс-блоковете в няколко реда, по три блока в ред.

За целта на родителя на флексовете ще зададем ширина от 300px и flex-wrap със стойност wrap, а на децата - ширина от 100px:

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>

css.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 и ще получим желаното разстояние между блоковете:

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>

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

Нека пуснем кода:

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>

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

Результат:

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