Flex Bootstrap 5
- Предыдущая страница Утилиты BS5
- Следующая страница Формы BS5
Эластичный контейнер
Основное различие между Bootstrap 3 и Bootstrap 4 & 5 заключается в том, что Bootstrap 5 теперь использует flexbox вместо浮动 для обработки макета.
эластичный модуль блоков, который позволяет легко проектировать эластичные адаптивные структуры布局а, не используя浮动 или позиционирование.
Если вы не знакомы с flex, вы можете изучить его в наших Уроки CSS Flexbox изучайте.
Примечание:IE9 и более ранние версии не поддерживают Flexbox.
Примечание:Если вам нужна поддержка 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">Элемент эластичности 1</div> <div class="p-2 bg-warning">Элемент эластичности 2</div> <div class="p-2 bg-primary">Элемент эластичности 3</div> </div>
пример
Для создания инлайн flexbox контейнера используйте d-inline-flex Классы:
<div class="d-inline-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Элемент эластичности 1</div> <div class="p-2 bg-warning">Элемент эластичности 2</div> <div class="p-2 bg-primary">Элемент эластичности 3</div> </div>
Горизонтальное направление
пожалуйста, используйте .flex-row Горизонтальное (вдоль) отображение эластичных элементов. Это настройка по умолчанию.
Совет:Использование .flex-row-reverse Можете править выравнивание по горизонтали направо:
пример
<div class="d-flex flex-row bg-secondary"> <div class="p-2 bg-info">Элемент эластичности 1</div> <div class="p-2 bg-warning">Элемент эластичности 2</div> <div class="p-2 bg-primary">Элемент эластичности 3</div> </div> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">Элемент эластичности 1</div> <div class="p-2 bg-warning">Элемент эластичности 2</div> <div class="p-2 bg-primary">Элемент эластичности 3</div> </div>
Вертикальное направление
пожалуйста, используйте .flex-column Вертикальное отображение flex элементов (складывающихся друг на друга), или использовать .flex-column-reverse 逆变垂直方向:
пример
<div class="d-flex flex-column"> <div class="p-2 bg-info">Элемент эластичности 1</div> <div class="p-2 bg-warning">Элемент эластичности 2</div> <div class="p-2 bg-primary">Элемент эластичности 3</div> </div> <div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">Элемент эластичности 1</div> <div class="p-2 bg-warning">Элемент эластичности 2</div> <div class="p-2 bg-primary">Элемент эластичности 3</div> </div>
Выровняйте содержимое
Использование .justify-content-* Классы могут изменять способ выравнивания эластичных элементов. Допустимые классы: :
start(по умолчанию)endcenterbetweenaround
пример
<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 Можете принудительно сделать их одинаковой ширины:
пример
<div class="d-flex"> <div class="p-2 bg-info flex-fill">Эластичный элемент 1</div> <div class="p-2 bg-warning flex-fill">Эластичный элемент 2</div> <div class="p-2 bg-primary flex-fill">Эластичный элемент 3</div> </div>
Расширение
Использование на эластичных элементах .flex-grow-1 Может занимать избыточное пространство. В следующем примере, первые два flex элемента занимают необходимое пространство, а последний элемент занимает оставшееся доступное пространство:
пример
<div class="d-flex"> <div class="p-2 bg-info">Элемент эластичности 1</div> <div class="p-2 bg-warning">Элемент эластичности 2</div> <div class="p-2 bg-primary flex-grow-1">Элемент эластичности 3</div> </div>
Совет:Использование на эластичных элементах .flex-shrink-1 может уменьшиться при необходимости.
Порядок
Использование .order Классы могут изменить визуальный порядок конкретного элемента flex. Доступны классы от 0 до 5, где наименьшие числа имеют наивысший приоритет (order-1 отображается перед order-2 и т.д.):
пример
<div class="d-flex bg-secondary"> <div class="p-2 bg-info order-3">Элемент эластичности 1</div> <div class="p-2 bg-warning order-2">Элемент эластичности 2</div> <div class="p-2 bg-primary order-1">Элемент эластичности 3</div> </div>
автоматического поля
Использование .ms-auto(перемещает элементы вправо) Или используйте .me-auto(перемещает элементы влево) Добавление автоматического поля к эластичным элементам выполняется легко:
пример
<div class="d-flex bg-secondary"> <div class="p-2 ms-auto bg-info">Элемент эластичности 1</div> <div class="p-2 bg-warning">Элемент эластичности 2</div> <div class="p-2 bg-primary">Элемент эластичности 3</div> </div> <div class="d-flex bg-secondary"> <div class="p-2 bg-info">Элемент эластичности 1</div> <div class="p-2 bg-warning">Элемент эластичности 2</div> <div class="p-2 me-auto bg-primary">Элемент эластичности 3</div> </div>
Перенос строки
через .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>
Выровняйте содержимое
пожалуйста, используйте .align-content-* Классы контролируют вертикальное выравнивание эластичных элементов. Доступны следующие классы:
.start-align-content(по умолчанию).end-align-content.center-align-content.align-content-between.align-content-around.align-content-stretch
Примечание:Эти классы не влияют на эластичные элементы в одной строке.
пожалуйста, нажмите на кнопку ниже, чтобы увидеть различия между пятью классами: измените вертикальное выравнивание эластичных элементов в примере.
пример
<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>
Выровняйте элементы
пожалуйста, используйте .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-baseline">..</div> <div class="d-flex align-items-stretch">..</div>
самостоятельное выравнивание
пожалуйста, используйте .align-self-* классовое управлениеуказать эластичный элементспособ вертикальной выравнивания.
.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch(по умолчанию)
нажмите на кнопку ниже, чтобы увидеть различия между пятью классами:
пример
<div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Элемент Flex 1</div> <div class="p-2 border align-self-start">Элемент Flex 2</div> <div class="p-2 border">Элемент Flex 3</div> </div>
reakтивные Flex классы
все эластичные классы имеют дополнительные ответвленные классы, что упрощает установку специфического класса flex на определенном размере экрана.
* может быть заменено sm, md, lg, xl или xxl, что соответственно означает малый, средний, большой,超大 и гигантский экран.
поиск специфического эластичного класса ..
| класс | описание | пример |
|---|---|---|
| эластичный контейнер | ||
.d-*-flex |
создать контейнер flexbox для разных экранов. | Попробуйте |
.d-*-inline-flex |
создать контейнер flexbox в строке для разных экранов. | Попробуйте |
| направление | ||
.flex-*-row |
вывод эластичных элементов горизонтально на разных экранах. | Попробуйте |
.flex-*-row-reverse |
вывод эластичных элементов горизонтально и правым отступом на разных экранах. | Попробуйте |
.flex-*-column |
вывод эластичных элементов вертикально на разных экранах. | Попробуйте |
.flex-*-column-reverse |
вывод эластичных элементов вертикально в обратном порядке на разных экранах. | Попробуйте |
| содержимое в строке | ||
.justify-content-*-start |
отображение эластичных элементов от начала (левый отступ) на разных экранах. | Попробуйте |
.justify-content-*-end |
отображение эластичных элементов в конце (правый отступ) на разных экранах. | Попробуйте |
.justify-content-*-center |
отображение эластичных элементов в центре контейнера на разных экранах. | Попробуйте |
.justify-content-*-between |
равномерное отображение эластичных элементов на разных экранах. | Попробуйте |
.justify-content-*-around |
вывод эластичных элементов вокруг на разных экранах. | Попробуйте |
| Заполнение / равная ширина | ||
.flex-*-fill |
принудительно сделать ширину эластичных элементов равной на разных экранах. | Попробуйте |
| расширение | ||
.flex-*-grow-0 |
не позволять элементам расширяться на разных экранах. | |
.flex-*-grow-1 |
сделать расширение элементов на разных экранах. | |
| сжатие | ||
.flex-*-shrink-0 |
Не позволяйте элементам сжиматься на различных экранах. | |
.flex-*-shrink-1 |
Сожмите элементы на различных экранах. | |
| Порядок | ||
.order-*-0-12 |
Изменяйте порядок от 0 до 12 на малых экранах. | Попробуйте |
| Перенос строки | ||
.flex-*-nowrap |
Не переносите строки элементов на различных экранах. | Попробуйте |
.flex-*-wrap |
Переносите строки элементов на различных экранах. | Попробуйте |
.flex-*-wrap-reverse |
逆变不同屏幕上对项目的换行。 | Попробуйте |
| Выровняйте содержимое | ||
.align-content-*-start |
Выровняйте элементы от начала на различных экранах. | Попробуйте |
.align-content-*-end |
Выровняйте элементы по концу на различных экранах. | Попробуйте |
.align-content-*-center |
Выровняйте элементы по центру на различных экранах. | Попробуйте |
.align-content-*-around |
Выровняйте элементы по окружности на различных экранах. | Попробуйте |
.align-content-*-stretch |
Растяните элементы на различных экранах. | Попробуйте |
| Выровняйте элементы | ||
.align-items-*-start |
Выровняйте однolinейные элементы от начала на различных экранах. | Попробуйте |
.align-items-*-end |
Выровняйте однolinейные элементы по концу на различных экранах. | Попробуйте |
.align-items-*-center |
Выровняйте однolinейные элементы по центру на различных экранах. | Попробуйте |
.align-items-*-baseline |
Выровняйте однolinейные элементы по базовой линии на различных экранах. | Попробуйте |
.align-items-*-stretch |
Растяните однolinейные элементы на различных экранах. | Попробуйте |
| Выровняйте себя | ||
.align-self-*-start |
Выровняйте эластичные элементы от начала на различных экранах. | Попробуйте |
.align-self-*-end |
Выровняйте эластичные элементы по концу на различных экранах. | Попробуйте |
.align-self-*-center |
Выровняйте эластичные элементы по центру на различных экранах. | Попробуйте |
.align-self-*-baseline |
Выровняйте эластичные элементы по базовой линии на различных экранах. | Попробуйте |
.align-self-*-stretch |
Растяните эластичные элементы на различных экранах. | Попробуйте |
- Предыдущая страница Утилиты BS5
- Следующая страница Формы BS5
