Контейнер CSS Flex
Родительский элемент (контейнер)
Как мы указывали в предыдущей главе, это гибкий контейнер (синяя область) с тремя гибкими элементами :
1
2
3
Гибкий контейнер становится гибким, если установить для displayсвойства значение
flex:
Пример
.flex-container {
display: flex;
}
Свойства гибкого контейнера:
Свойство flex-direction
Свойство flex-directionопределяет, в каком направлении контейнер хочет складывать flex-элементы.
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-элементы горизонтально (но справа налево):
.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-элементы будут переноситься при необходимости:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Пример
Значение nowrapуказывает, что flex-элементы не будут переноситься (по умолчанию):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Пример
Значение wrap-reverseуказывает, что гибкие элементы будут переноситься при необходимости в обратном порядке:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Свойство гибкого потока
Свойство flex-flowявляется сокращенным свойством для установки свойств
flex-directionи
.flex-wrap
Пример
.flex-container {
display: flex;
flex-flow: row wrap;
}
Свойство justify-content
Свойство justify-contentиспользуется для выравнивания flex-элементов:
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используется для выравнивания flex-элементов.
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и значение , и элемент flex будет идеально центрирован:align-itemscenter
Пример
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Свойства контейнера CSS Flexbox
В следующей таблице перечислены все свойства CSS Flexbox Container:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |