CSS Flexbox контейнер
Родительский элемент (контейнер)
Как мы указывали в предыдущей главе, это гибкий контейнер (синяя область) с тремя гибкими элементами:
1
2
3
Контейнер становится гибким, установив для свойства display значение flex:
.flex-container {
display: flex;
}
Свойства гибкого контейнера следующие:
Свойство flex-direction
Свойство flex-direction определяет, в каком направлении контейнер хочет укладывать элементы flex.
1
2
3
Значение столбца column содержит элементы flex по вертикали (сверху вниз):
.flex-container {
display: flex;
flex-direction: column;
}
Значение column-reverse размещает элементы flex по вертикали (но снизу вверх):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Значение строки row размещает элементы flex по горизонтали (слева направо):
.flex-container {
display: flex;
flex-direction: row;
}
Значение row-reverse размещает элементы flex горизонтально (но справа налево):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Свойство flex-wrap
Свойство flex-wrap указывает, следует ли переносить элементы flex или нет.
Приведенные ниже примеры содержат 12 элементов flex, чтобы лучше продемонстрировать свойство 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 указывает, что гибкие элементы при необходимости будут переноситься в обратном порядке:
The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Свойство flex-flow
Свойство flex-flow является сокращенным свойством для настройки как flex-direction, так и flex-оберните свойства.
.flex-container {
display: flex;
flex-flow: row wrap;
}
Свойство justify-content
Свойство justify-content используется для выравнивания элементов flex:
1
2
3
Значение center выравнивает элементы flex по центру контейнера:
.flex-container {
display: flex;
justify-content: center;
}
Значение flex-start выравнивает элементы flex в начале контейнера (это значение по умолчанию):
.flex-container {
display: flex;
justify-content: flex-start;
}
Значение flex-end выравнивает элементы flex в конце контейнера:
.flex-container {
display: flex;
justify-content: flex-end;
}
Значение space-around отображает элементы flex с пробелом перед строками, между ними и после них:
.flex-container {
display: flex;
justify-content: space-around;
}
Значение space-between отображает элементы flex с пробелом между строками:
.flex-container {
display: flex;
justify-content: space-between;
}
Свойство align-items
Свойство align-items используется для выравнивания элементов flex.
1
2
3
В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать свойство align-items.
Значение center выравнивает элементы flex по центру контейнера:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Значение flex-start выравнивает элементы flex в верхней части контейнера:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Значение flex-end выравнивает элементы flex в нижней части контейнера:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Значение stretch растягивает элементы flex для заполнения контейнера (это значение по умолчанию):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Значение baseline выравнивает элементы flex так, как выравниваются их базовые линии:
.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 значение центрируйте, и гибкий элемент будет идеально отцентрирован:
.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 | Выравнивает элементы flex по горизонтали, когда элементы не используют все доступное пространство на главной оси |