CSS Гибкий (flex) контейнер
Родительский элемент (контейнер)
Как мы указали в предыдущей главе, это гибкий контейнер (синяя область) с тремя гибкими элементами:
1
2
3
Гибкий (flex) контейнер становится гибким, если для свойства display установлено значение flex:
Свойства гибкого (flex) контейнера:
Свойство flex-direction
Свойство flex-direction определяет, в каком направлении контейнер хочет складывать гибкие элементы.
1
2
3
Пример
Значение column складывает гибкие элементы по вертикали (сверху вниз):
.flex-container {
display: flex;
flex-direction: column;
}
Пример
Значение column-reverse складывает гибкие элементы по вертикали (но снизу вверх):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Пример
Значение row складывает гибкие элементы по горизонтали (слева направо):
.flex-container {
display: flex;
flex-direction: row;
}
Пример
Значение row-reverse складывает гибкие элементы по горизонтали (но справа налево):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Свойство flex-wrap
Свойство flex-wrap определяет, должны ли элементы гибкости оборачиваться или нет.
В приведенных ниже примерах есть 12 гибких элементов, чтобы лучше продемонстрировать свойство flex-wrap.
1
2
3
4
5
6
7
8
9
10
11
12
Пример
Значение wrap указывает, что гибкие элементы будут переноситься при необходимости:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Пример
Значение nowrap указывает, что гибкие элементы не будут переноситься (по умолчанию):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Пример
Значение wrap-reverse указывает, что гибкие элементы будут упакованы при необходимости в обратном порядке:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Свойство flex-flow
Свойство flex-flow - это сокращенное свойство для установки свойств flex-direction и flex-wrap.
Свойство justify-content
Свойство justify-content используется для выравнивания гибких элементов:
1
2
3
Пример
Значение center выравнивает гибкие элементы в центре контейнера:
.flex-container {
display: flex;
justify-content: center;
}
Пример
Значение flex-start выравнивает гибкие элементы в начале контейнера (по умолчанию):
.flex-container {
display: flex;
justify-content: flex-start;
}
Пример
Значение flex-end выравнивает гибкие элементы в конце контейнера:
.flex-container {
display: flex;
justify-content: flex-end;
}
Пример
Значение space-around отображает гибкие элементы с пробелом до, между и после строк:
.flex-container {
display: flex;
justify-content: space-around;
}
Пример
Значение space-between отображает элементы гибкости с пробелом между строками:
.flex-container {
display: flex;
justify-content: space-between;
}
Свойство align-items
Свойство align-items используется для выравнивания гибких элементов.
1
2
3
В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать свойство align-items.
Пример
Значение center выравнивает гибкие элементы в середине контейнера:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Пример
Значение flex-start выравнивает гибкие элементы в верхней части контейнера:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Пример
Значение flex-end выравнивает гибкие элементы в нижней части контейнера:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Пример
Значение stretch растягивает гибкие элементы, чтобы заполнить контейнер (по умолчанию):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Пример
Значение baseline выравнивает гибкие элементы, например выравнивает их базовые линии:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Примечание: в примере используется другой размер шрифта, чтобы продемонстрировать выравнивание элементов по базовой линии текста.:
1
2
3
Свойство align-content
Свойство align-content используется для выравнивания гибких линий.
1
2
3
4
5
6
7
8
9
10
11
12
В этих примерах мы используем контейнер высотой 600 пикселей со свойством flex-wrap установленным на wrap, чтобы лучше продемонстрировать свойство align-content.
Пример
Значение space-between отображает гибкие линии с равным пространством между ними:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Пример
Значение space-around отображает гибкие линии с пробелом до, между и после них:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Пример
Значение stretch растягивает гибкие линии, чтобы занять оставшееся пространство (по умолчанию):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Пример
Значение center отображает гибкие линии в середине контейнера:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Пример
Значение flex-start отображает гибкие линии в начале контейнера:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Пример
Значение flex-end отображает гибкие линии в конце контейнера:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Идеальное центрирование
В следующем примере мы решим очень распространенную проблему стиля: идеальное центрирование.
РЕШЕНИЕ: Установите для свойств justify-content и align-items значение center, и гибкий элемент будет идеально центрирован:
Пример
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Свойства контейнера CSS Flexbox
В следующей таблице перечислены все свойства контейнера CSS Flexbox:
| Свойства | Описание |
|---|---|
| align-content | Изменяет поведение свойства flex-wrap. Он похож на align-items, но вместо выравнивания гибких элементов он выравнивает гибкие линии |
| align-items | Вертикальное выравнивание гибких элементов, когда элементы не используют все доступное пространство на поперечной оси |
| display | Определяет тип поля, используемого для элемента HTML |
| flex-direction | Задает направление гибких элементов внутри гибкого контейнера |
| flex-flow | Сокращенное свойство для flex-direction и flex-wrap |
| flex-wrap | Определяет, должны ли гибкие элементы оборачиваться или нет, если для них недостаточно места на одной гибкой линии |
| justify-content | Горизонтально выравнивает гибкие элементы, когда элементы не используют все доступное пространство на главной оси |
