Bootstrap 5 на момент написания находится на стадии альфа-тестирования и может быть изменен.
Bootstrap - популярная библиотека пользовательского интерфейса для любых приложений JavaScript.
В этой статье мы рассмотрим, как использовать классы flexbox с Bootstrap 5.
Flex
Bootstrap 5 предоставляет нам классы, позволяющие легко использовать flexbox.
Например, мы можем написать:
<div class="d-flex p-2 bd-highlight">flexbox container</div>чтобы добавить опору d-flex, чтобы сделать наш div display: flex.
Другие варианты класса d-flex включают:
.d-flex.d-inline-flex.d-sm-flex.d-sm-inline-flex.d-md-flex.d-md-inline-flex.d-lg-flex.d-lg-inline-flex.d-xl-flex.d-xl-inline-flex.d-xxl-flex.d-xxl-inline-flex
Направление
Мы можем изменить направление макета flexbox, добавив больше классов.
Например, мы можем написать .flex-row для горизонтального сгибания.
И .flex-row-reverse заставит гибкий макет начинаться справа, а не слева.
Итак, мы можем написать:
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>чтобы добавить их.
Первый div будет придерживаться левого края.
А второй начнется с правого края и будет отображаться в обратном порядке.
Мы можем использовать .flex-column, чтобы установить вертикальное направление.
.flex-column-reverse начинает вертикальное направление с противоположной стороны.
Мы можем добавить это с помощью:
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>Также доступны:
.flex-row.flex-row-reverse.flex-column.flex-column-reverse.flex-sm-row.flex-sm-row-reverse.flex-sm-column.flex-sm-column-reverse.flex-md-row.flex-md-row-reverse.flex-md-column.flex-md-column-reverse.flex-lg-row.flex-lg-row-reverse.flex-lg-column.flex-lg-column-reverse.flex-xl-row.flex-xl-row-reverse.flex-xl-column.flex-xl-column-reverse.flex-xxl-row.flex-xxl-row-reverse.flex-xxl-column.flex-xxl-column-reverse
Обосновать содержание
Мы можем распределить наш контент, используя justify-content классы.
Суффикс может быть end, center, between, around и evenly.
start - значение по умолчанию. Элементы начинаются с левого края.
end заставляет элементы начинать с правого края.
center сделать их по центру.
between сделать их отображаемыми с пробелом между ними.
around сделать так, чтобы они отображались с пространством с обеих сторон.
evenly сделайте их разложенными равномерно.
Например, мы можем написать:
<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>
<div class="d-flex justify-content-evenly">...</div>использовать эти классы.
Другие варианты включают:
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around.justify-content-evenly.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-sm-evenly.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-md-evenly.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-lg-evenly.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around.justify-content-xl-evenly.justify-content-xxl-start.justify-content-xxl-end.justify-content-xxl-center.justify-content-xxl-between.justify-content-xxl-around.justify-content-xxl-evenly
Заключение
Мы можем использовать flexbox с классами, предоставленными Bootstrap 5.
Предметы можно выровнять и согласовать с ними по-нашему.
JavaScript на простом английском языке
Вы знали, что у нас четыре публикации и канал на YouTube? Найдите их все на plainenglish.io и подпишитесь на Decoded, наш канал YouTube!
