CSS Flexbox
1
2
3
4
5
6
7
8
Модуль компоновки CSS Flexbox
Перед модулем компоновки Flexbox было четыре режима компоновки:
- Блок, для разделов на веб-странице
- Встроенный, для текста
- Таблица для двумерных табличных данных
- Положение, для явного положения элемента
Модуль компоновки гибких коробок упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования.
Flexbox элементы
Чтобы начать использовать модель Flexbox, необходимо сначала определить контейнер Flex.
1
2
3
Этот элемент представляет собой контейнер Flex (синяя область) с тремя элементами Flex.
Пример
Гибкий контейнер с тремя гибкими элементами:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Родительский элемент (контейнер)
Гибкий контейнер становится гибким, установив display свойство в значение Flex:
Пример
.flex-container {
display: flex;
}
Свойства контейнера Flex:
Свойство Flex-Direction
Свойство flex-direction определяет, в каком направлении контейнеру требуется стек элементов Flex.
1
2
3
Пример
Значение Column суммирует элементы Flex по вертикали (сверху вниз):
.flex-container {
display: flex;
flex-direction: column;
}
Пример
Значение столбец-реверс суммирует элементы Flex по вертикали (но снизу вверх):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Пример
Значение Row суммирует элементы Flex горизонтально (слева направо):
.flex-container {
display: flex;
flex-direction: row;
}
Пример
Значение строка-реверс суммирует элементы 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;
}
Пример
Значение UN Wrap указывает, что элементы Flex не будут обтекать (по умолчанию):
.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.
Пример
.flex-container {
display: flex;
flex-flow: row wrap;
}
Свойство "выравнивание-содержимое"
Свойство 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;
}
Пример
Значение пространство вокруг отображает элементы Flex с пробелами до, между и после строк:
.flex-container {
display: flex;
justify-content: space-around;
}
Пример
Значение пробел-между отображает элементы Flex с интервалом между строками:
.flex-container {
display: flex;
justify-content: space-between;
}
Свойство Выравнивание-элементы
Свойство 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;
}
Пример
Значение Базовая линия выравнивает элементы Flex, такие как Выравнивание базовых линий:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:
1
2
3
Свойство выравнивания содержимого
Свойство align-content используется для выравнивания гибких линий.
1
2
3
4
5
6
7
8
9
10
11
12
В этих примерах мы используем контейнер высотой 600 пикселей с свойством Flex-Wrap, который имеет значение Wrap, чтобы лучше продемонстрировать align-content свойство.
Пример
Значение пробел-между отображает гибкие линии с равным пространством между ними:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Пример
Значение пространство вокруг отображает гибкие линии с пробелами до, между и после них:
.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 будут идеально центрированы:
Пример
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Дочерние элементы (элементы)
Прямые дочерние элементы контейнера Flex автоматически становятся гибкими (Flex) элементами.
1
2
3
4
Вышеприведенный элемент представляет собой четыре синих элемента Flex внутри серого контейнера Flex.
Пример
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Свойства элемента Flex:
Свойство Order
Свойство order указывает порядок элементов Flex.
1
2
3
4
Первый элемент Flex в коде не должен отображаться в качестве первого элемента макета.
Значение Order должно быть числом, значением по умолчанию является 0.
Пример
Свойство Order может изменить порядок элементов Flex:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
Flex-расти собственности
Свойство flex-grow указывает, сколько гибкого элемента будет увеличиваться относительно остальных элементов Flex.
1
2
3
Значение должно быть числом, значением по умолчанию является 0.
Пример
Сделать третий гибкий элемент расти в восемь раз быстрее, чем другие элементы Flex:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
Свойство Flex-сжатие
Свойство flex-shrink указывает, сколько гибкого элемента будет сжиматься относительно остальных элементов Flex.
1
2
3
4
5
6
7
8
9
10
Значение должно быть числом, значением по умолчанию является 1.
Пример
Не позволяйте третьему элементу Flex уменьшаться столько, сколько другие элементы Flex:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
Свойство Flex-базиса
Свойство flex-basis указывает начальную длину элемента Flex.
1
2
3
4
Пример
Set the initial length of the third flex item to 200 pixels:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
Свойство Flex
Свойство flex является сокращенным свойством для свойств
flex-grow , flex-shrink и flex-basis.
Пример
Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
Свойство "выравнивание-само"
Свойство align-self задает выравнивание для выбранного элемента внутри гибкого контейнера.
Свойство align-self переопределяет выравнивание по умолчанию, заданное свойством align-items контейнера.
1
2
3
4
В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать свойство
align-self:
Пример
Совместите третий элемент Flex в середине контейнера:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
Пример
Совместите второй элемент Flex в верхней части контейнера и третий элемент Flex в нижней части контейнера:
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
Адаптивная Галерея изображений с помощью Flexbox
Используйте Flexbox для создания адаптивной галереи изображений, которая варьируется от четырех, двух или полной ширины изображения в зависимости от размера экрана:
Отзывчивый сайт с помощью Flexbox
Используйте Flexbox для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент:
Поддержка браузера
Свойства Flexbox поддерживаются во всех современных браузерах.
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Свойства Flexbox CSS
В следующей таблице перечислены свойства CSS, используемые с Flexbox:
| Свойство | Описание |
|---|---|
| display | Указывает тип поля, используемого для элемента HTML |
| flex-direction | Задает направление гибких элементов внутри контейнера Flex |
| justify-content | Горизонтально выравнивает элементы Flex, если элементы не используют все доступное пространство на главной оси |
| align-items | Вертикальное выравнивание элементов Flex, если элементы не используют все доступное пространство на поперечной оси |
| flex-wrap | Указывает, должны ли элементы Flex обернуть или нет, если для них недостаточно места на одной гибкой линии |
| align-content | Изменяет поведение свойства Flex-Wrap. Он похож на выравнивание-элементы, но вместо выравнивания элементов Flex, он выравнивает гибкие линии |
| flex-flow | Сокращенное свойство для Flex-направление и Flex-Wrap |
| order | Задает порядок гибкого элемента относительно остальных элементов Flex внутри того же контейнера |
| align-self | Используется для элементов Flex. Переопределяет свойство выравнивания элементов контейнера |
| flex | Сокращенное свойство для Flex-расти, Flex-сжатия и Flex-основы свойства |