Bootstrap 4 Flex
Bootstrap 4 Flex
Используйте классы Flex для управления компоновкой компонентов Bootstrap 4.
Flexbox
Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что BootStrap 4 теперь использует Flexbox, а не float, для обработки макета.
Модуль компоновки гибких коробок упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования. Если вы новичок в Flex, вы можете прочитать об этом в нашем CSS Flexbox учебник.
Примечание: Flexbox не поддерживается в IE9 и более ранних версиях.
Если вам нужна поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.
Для создания контейнера Flexbox и преобразования прямых дочерних элементов в элементы Flex используйте d-flex
класс:
Пример
Пример
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Чтобы создать встроенный контейнер Flexbox, используйте d-inline-flex
класс:
Пример
Пример
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Горизонтальное направление
Используется .flex-row
для отображения элементов Flex горизонтально (бок о бок). Это значение по умолчанию.
Совет: используйте .flex-row-reverse
Выравнивание по горизонтали по правому краю:
Пример
Пример
<div class="d-flex flex-row
bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Вертикальное направление
Используется .flex-column
для отображения элементов Flex вертикально (поверх друг друга) или для изменения .flex-column-reverse
вертикального направления:
Пример
Пример
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Выравнивание содержимого
Используйте .justify-content-*
классы для изменения выравнивания элементов Flex. Допустимые классы start
(по умолчанию),,, end
center
between
или around
:
Пример
Пример
<div class="d-flex justify-content-start">...</div>
<div class="d-flex
justify-content-end">...</div>
<div class="d-flex
justify-content-center">...</div>
<div class="d-flex
justify-content-between">...</div>
<div class="d-flex
justify-content-around">...</div>
Заливка/равная ширина
Используйте .flex-fill
для элементов Flex, чтобы заставить их в равной ширины:
Пример
Пример
<div class="d-flex">
<div class="p-2 bg-info
flex-fill">Flex
item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
Grow
Используйте для .flex-grow-1
элемента Flex, чтобы занять оставшуюся часть пространства. В приведенном ниже примере первые два элемента Flex занимают необходимое пространство, в то время как последний элемент занимает оставшуюся часть доступного пространства:
Пример
Пример
<div class="d-flex">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
Совет: Используйте .flex-shrink-1
на Flex элемент, чтобы сделать его сжатие, если это необходимо.
Order
Изменение визуального порядка конкретных элементов Flex с помощью .order
классов. Допустимые классы от 0 до 12, где наименьшее число имеет наивысший приоритет (Order-1 отображается перед порядком-2 и т.д.):
Пример
Пример
<div class="d-flex bg-secondary">
<div class="p-2 bg-info
order-3">Flex
item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
Автоматические поля
С легкостью добавляйте автоматические поля в элементы Flex .mr-auto
(нажимайте элементы вправо) или с помощью .ml-auto
(передвиньте элементы влево):
Пример
Пример
<div class="d-flex
bg-secondary">
<div class="p-2 mr-auto bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div
class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 ml-auto bg-primary">Flex item
3</div>
</div>
Обернуть
Управление переносом элементов Flex в контейнер Flex с помощью .flex-nowrap
(по умолчанию) .flex-wrap
или .flex-wrap-reverse
.
Нажмите на кнопки ниже, чтобы увидеть разницу между тремя классами, по Чанг в упаковке Flex элементов в примере поле:
Пример
Пример
<div class="d-flex flex-wrap">..</div>
<div class="d-flex
flex-wrap-reverse">..</div>
<div class="d-flex
flex-nowrap">..</div>
Выравнивание содержимого
Управление вертикальным выравниванием собранных элементов Flex с помощью .align-content-*
классов. Допустимые классы .align-content-start
(по умолчанию),,,, .align-content-end
.align-content-center
.align-content-between
.align-content-around
и .align-content-stretch
.
Примечание: Эти классы не влияют на отдельные строки элементов Flex.
Example
Пример
<div class="d-flex flex-wrap
align-content-start">..</div>
<div class="d-flex
flex-wrap align-content-end">..</div>
<div class="d-flex
flex-wrap align-content-center">..</div>
<div class="d-flex
flex-wrap align-content-around">..</div>
<div class="d-flex
flex-wrap align-content-stretch">..</div>
Выравнивание элементов
Управление вертикальным выравниванием отдельных строк элементов Flex с помощью .align-items-*
классов. Допустимые классы .align-items-start
:, .align-items-end
, .align-items-center
.align-items-baseline
и .align-items-stretch
(по умолчанию).
Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами:
Пример
Пример
<div class="d-flex align-items-start">..</div>
<div class="d-flex
align-items-end">..</div>
<div class="d-flex
align-items-center">..</div>
<div class="d-flex align-items-around">..</div>
<div class="d-flex
align-items-stretch">..</div>
Выравнивание себя
Управление вертикальным выравниванием заданного элемента Flex с классами .align-self-*
. Допустимые классы .align-self-start
:, .align-self-end
, .align-self-center
.align-self-baseline
и .align-self-stretch
(по умолчанию).
Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами:
Example
Пример
<div class="d-flex bg-light" style="height:150px">
<div
class="p-2 border">Flex item 1</div>
<div class="p-2 border
align-self-start">Flex item 2</div>
<div
class="p-2 border">Flex item 3</div>
</div>
Адаптивные классы Flex
Все классы Flex оснащены дополнительными адаптивными классами, что упрощает задание определенного класса Flex для определенного размера экрана.
*
символ может быть заменен SM, MD, LG или XL, который представляет малые, средние, большие или XLarge экраны.
Класс | Описание | |
---|---|---|
Flex Container | ||
.d-*-flex |
Создает контейнер Flexbox для различных экранов | |
.d-*-inline-flex |
Создает встроенный Flexbox контейнер для различных экранов | |
Direction | ||
.flex-*-row |
Отображать гибкие элементы по горизонтали на разных экранах | |
.flex-*-row-reverse |
Отображение гибких элементов по горизонтали и по правому краю на разных экранах | |
.flex-*-column |
Отображать гибкие элементы по вертикали на разных экранах | |
.flex-*-column-reverse |
Отображать гибкие элементы по вертикали, с обратным порядком, на разных экранах | |
Justified Content | ||
.justify-content-*-start |
Отображать элементы Flex с начала (по левому краю) на разных экранах | |
.justify-content-*-end |
Отображение элементов Flex в конце (по правому краю) на разных экранах | |
.justify-content-*-center |
Отображение элементов Flex в центре контейнера Flex на разных экранах | |
.justify-content-*-between |
Отображать гибкие элементы в "между" на разных экранах | |
.justify-content-*-around |
Отображать гибкие элементы "вокруг" на разных экранах | |
Fill / Equal Width | ||
.flex-*-fill |
Принудить элементы Flex к одинаковой ширине на разных экранах | |
Grow | ||
.flex-*-grow-0 |
Не делайте элементы растут на разных экранах | |
.flex-*-grow-1 |
Сделать элементы растут на разных экранах | |
Shrink | ||
.flex-*-shrink-0 |
Не делайте элементы термоусадочные на разные экраны | |
.flex-*-shrink-1 |
Сжатие элементов на разных экранах | |
Order | ||
.order-*-0-12 |
Изменение порядка от 0 до 12 на маленьких экранах | |
Wrap | ||
.flex-*-nowrap |
Не оборачивать элементы на разных экранах | |
.flex-*-wrap |
Перенос элементов на различные экраны | |
.flex-*-wrap-reverse |
Реверсировать обтекание элементов на разных экранах | |
Align Content | ||
.align-content-*-start |
Выравнивание собранных элементов с начала на разных экранах | |
.align-content-*-end |
Выравнивание собранных элементов в конце на разных экранах | |
.align-content-*-center |
Выравнивание собранных элементов в центре на разных экранах | |
.align-content-*-around |
Выравнивание собранных элементов "вокруг" на разных экранах | |
.align-content-*-stretch |
Растянуть собранные элементы на разных экранах | |
Align Items | ||
.align-items-*-start |
Выравнивание отдельных рядов элементов с начала на разных экранах | |
.align-items-*-end |
Выравнивание отдельных рядов элементов в конце на разных экранах | |
.align-items-*-center |
Выравнивание одиночных рядов элементов в центре на разных экранах | |
.align-items-*-baseline |
Выравнивание отдельных строк элементов на базовой линии на разных экранах | |
.align-items-*-stretch |
Растянуть отдельные ряды элементов на разных экранах | |
Align Self | ||
.align-self-*-start |
Выравнивание элемента Flex с начала на разных экранах | |
.align-self-*-end |
Выравнивание элемента Flex в конце на разных экранах | |
.align-self-*-center |
Выравнивание элемента Flex в центре на разных экранах | |
.align-self-*-baseline |
Выравнивание элемента Flex по базовой линии на разных экранах | |
.align-self-*-stretch |
Растянуть гибкий элемент на разных экранах |