Работа с флексбоксами в CSS
Как вы знаете, существует свойство justify-content,
которое выравнивает элементы по главной оси.
Есть также свойство align-items, которое
выравнивает элементы по поперечной оси. Давайте
немного поиграемся с ним.
Пусть у нас сейчас блоки выстроены в ряд,
то есть поперечная ось направлена вниз. С
помощью align-items поставим эти блоки
по центру:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Давайте теперь добавим больше блоков, добавим
многострочность с помощью flex-wrap,
увеличим высоту родителя с 300px до
500px и посмотрим, как сработает align-items
в этом многострочном случае:
<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;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Как мы видим, что-то как-то не очень центрируется. Как будто бы каждый ряд центрируется сам по себе в отведенном ему месте. Давайте сделаем так, чтобы все ряды как единое целое стали по центру родителя.
Для этого следует использовать свойство align-content,
которое нужно для многострочного текста.
Перепишем наш код:
<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;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Свойство align-content принимает такие
же значения, как и align-items.
Значение space-between
Давайте для примера посмотрим на значение
space-between. Установим родителю
высоту в 320px. Так как у нас три
ряда, и соответственно два расстояния между
рядами, то эти расстояния будут равны каждое
по 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;
align-content: space-between;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Значение stretch
Давайте попробуем значение stretch.
Для этого уберем высоту потомкам, а родителю
высоту установим в 600px для более
явного эффекта.
<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;
align-content: stretch;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
Значение stretch для align-content является
значением по умолчанию. Если мы уберем высоту
потомкам совсем, уберем свойство align-content,
но оставим высоту родителя и flex-wrap
- все будет работать также:
<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;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
А вот если убрать еще и flex-wrap
- все станет однострочным:
<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;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
Перевернем ось
<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: column;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<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: column;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<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: column;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Особые условия
Без flex-wrap: wrap ничего не работает пусть у нас одна линия:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Уберем flex-wrap: wrap - align-content: center перестанет работать:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
