CSS3 Flexbox
Гибкие коробки, или flexbox , это новый режим макета в CSS3.
Использование flexbox гарантирует , что элементы ведут себя предсказуемо , когда макет страницы должны учитывать различные размеры экрана и различных устройств отображения.
Для многих приложений модель гибкая коробка обеспечивает улучшение по сравнению с блочной модели в том, что она не использует поплавки, а также не коллапс рентабельности Flex контейнера с полями его содержимого.
Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает эту функцию.
Числа следуют -webkit- или -moz- указать первую версию , которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| Basic support (single-line flexbox) |
29.0 21.0 -webkit- |
11.0 | 22.0 18.0 -moz- |
6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- |
11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
CSS3 Flexbox Концепции
Flexbox состоит из гибких контейнеров и гибких элементов.
Гибком контейнер объявляется путем установки display свойства элемента либо flex (оказанной в виде блока) или inline-flex (оказанной в инлайн).
Внутри гибкого контейнера имеется один или более гибких элементов.
Примечание: Все , что за пределами гибкого контейнера и внутри гибкого элемента отображается как обычно. Flexbox определяет, как прогибается элементы размещаются внутри гибкого контейнера.
Flex элементы расположены внутри гибкого контейнера вдоль гибкой линии. По умолчанию есть только один гибкий линия на гибкий контейнер.
В следующем примере показаны три гибких элементов. Они расположены по умолчанию: вдоль горизонтальной линии гибкого трубопровода, слева направо:
пример
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div
class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div
class="flex-item">flex item 3</div>
</div>
</body>
</html>Кроме того, можно изменить направление гибкой линии.
Если мы устанавливаем direction свойство rtl (справа налево), текст рисуется справа налево, а также гибкий линия меняет направление, которое изменит макет страницы:
пример
body {
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
} Flex Направление
flex-direction свойство задает направление гибких элементов внутри гибкого контейнера. Значение по умолчанию flex-direction является row (слева-направо, сверху-вниз).
Остальные значения следующие:
-
row-reverse- Если режим письма (направление) является слева направо, гибкого трубопровода детали будут изложены справа налево -
column- Если система письма горизонтально, гибкого трубопровода элементы будут размещены вертикально -
column-reverse- То же колонке, но обратное
Следующий пример показывает результат использования row-reverse значение:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction:
row-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Следующий пример показывает результат использования column значение:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction:
column;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Следующий пример показывает результат использования column-reverse значение:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction:
column-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Свойство оправдает-контент
justify-content имущества по горизонтали выравнивает элементы гибкого контейнера, когда элементы не использовать все доступное пространство на главной оси.
Возможные значения заключаются в следующем:
-
flex-start- Значение по умолчанию. Элементы расположены в начале контейнера -
flex-end- Элементы расположены в конце контейнера -
center- Элементы расположены в центре контейнера -
space-between- Элементы расположены с пространством между линиями -
space-around- Элементы расположены с пространством до, между и после линий
Следующий пример показывает результат использования flex-end значение:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Следующий пример показывает результат использования center значение:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Следующий пример показывает результат использования space-between значения:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content:
space-between;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Следующий пример показывает результат использования space-around значения:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content:
space-around;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Выравнивать-элементы недвижимости
align-items имущества вертикально выравнивает элементы гибкого контейнера, когда элементы не использовать все доступное пространство на поперечной оси.
Возможные значения заключаются в следующем:
-
stretch- значение по умолчанию. Элементы растягиваются в соответствии с контейнера -
flex-start- элементы расположены в верхней части контейнера -
flex-end- Элементы расположены в нижней части контейнера -
center- Элементы расположены в центре контейнера ( по вертикали) -
baseline- Предметы расположены на базовой линии контейнера
Следующий пример показывает результат использования stretch значение (это значение по умолчанию):
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items:
stretch;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Следующий пример показывает результат использования flex-start значение:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items:
flex-start;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Следующий пример показывает результат использования flex-end значение:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Следующий пример показывает результат использования center значение:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Следующий пример показывает результат использования baseline значения:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items:
baseline;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Flex-обертка недвижимости
flex-wrap свойство указывает , должны ли элементы переноситься Flex или нет, если не хватает места для них на одной гибкой линии.
Возможные значения заключаются в следующем:
-
nowrap- Значение по умолчанию. Гибкие элементы не будут заворачивать -
wrap- гибкие элементы будут завернуть в случае необходимости -
wrap-reverse- Гибкие элементы будут заворачивать, в случае необходимости, в обратном порядке
Следующий пример показывает результат использования nowrap значение (это значение по умолчанию):
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} Следующий пример показывает результат использования wrap значение:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} Следующий пример показывает результат использования wrap-reverse значения:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap:
wrap-reverse;
width:
300px;
height: 250px;
background-color:
lightgrey;
} ALIGN-содержание недвижимости
align-content свойство изменяет поведение flex-wrap свойства. Он похож на align-items , но вместо выравнивания гибких элементов, он выравнивает гибкие линии.
Возможные значения заключаются в следующем:
-
stretch- значение по умолчанию. Линии растягиваться, чтобы занять оставшееся место -
flex-start- Линии упаковываются к началу гибкого контейнера -
flex-end- Линии упаковываются к концу гибкого контейнера -
center- Линии упаковываются по направлению к центру гибкого контейнера -
space-between- линиями равномерно распределены в контейнере гибкого -
space-around- Линии равномерно распределены в гибком контейнере, с половинного размера пространства на обоих концах
Следующий пример показывает результат использования center значение:
пример
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap:
wrap;
-webkit-align-content: center;
align-content:
center;
width:
300px;
height: 300px;
background-color:
lightgrey;
} Flex Свойства элемента
заказ
order свойство определяет порядок гибкого элемента относительно остальных гибких элементов внутри того же контейнера:
пример
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
} Поле
Установка margin: auto; будет поглощать дополнительное пространство. Он может быть использован, чтобы толкать сгибать элементы в различных положениях.
В следующем примере мы устанавливаем margin-right: auto; на первый гибкий элемент. Это заставит все дополнительное пространство, чтобы быть поглощенными справа от этого элемента:
пример
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
} Идеальный Центрирование
В следующем примере мы решим почти ежедневную проблему: идеальный центровку.
Это очень легко с flexbox. Установка margin: auto; сделает деталь идеально центрирован в обеих оси:
пример
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
} выравнивать-я
align-self свойство многоролевых элементов отменяет ALIGN-элементы Свойство флекс контейнера для этого элемента. Он имеет те же возможные значения, что и align-items имущества.
Следующий пример устанавливает различные значения Align автопортрета для каждого гибкого элемента:
пример
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self:
flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self:
baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
} сгибать
flex свойство определяет длину гибкого элемента, по отношению к остальной части гибких элементов внутри того же контейнера.
В следующем примере, первый гибкий элемент будет потреблять 2/4 свободного пространства, а два других гибких элементов будет потреблять 1/4 свободного пространства каждого:
пример
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
} 
Еще примеры
Как создать адаптивный сайт с flexbox
Этот пример демонстрирует, как создать адаптивный макет веб-сайта с flexbox.
CSS3 Flexbox Свойства
В следующей таблице перечислены свойства CSS, используемые с flexbox:
| Property | Description |
|---|---|
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| 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 |
| flex-flow | A shorthand propert for flex-direction and flex-wrap |
| order | Specifies the order of a flexible item relative to the rest of the flex items inside the same container |
| align-self | Used on flex items. Overrides the container's align-items property |
| flex | Specifies the length of a flex item, relative to the rest of the flex items inside the same container |