Перейти к основному содержанию

Flex

Быстро управляйте макетом, выравниванием и размером столбцов сетки, навигацией, компонентами и многим другим с помощью полного набора адаптивных утилит flexbox. Для более сложных реализаций может потребоваться собственный CSS.

Содержание

Включить гибкое поведение

Примените display утилиты для создания контейнера Flexbox и преобразования прямых дочерних элементов в элементы Flex. Гибкие контейнеры и элементы можно дополнительно модифицировать с помощью дополнительных гибких свойств.

Я контейнер Flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Я встроенный контейнер Flexbox!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Адаптивные варианты также существуют для .d-flex и .d-inline-flex.

Направление

Задайте направление гибких элементов в гибком контейнере с помощью утилит направления. В большинстве случаев вы можете опустить горизонтальный класс здесь, поскольку это значение по умолчанию для браузера row. Однако вы можете столкнуться с ситуациями, когда вам нужно явно установить это значение (например, адаптивные макеты).

Используется .flex-row для установки горизонтального направления (по умолчанию в браузере) или .flex-row-reverse для начала горизонтального направления с противоположной стороны.

Элемент гибкости 1
Элемент гибкости 2
Элемент гибкости 3
Элемент гибкости 1
Элемент гибкости 2
Элемент гибкости 3
<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>

Используется .flex-column для установки вертикального направления или .flex-column-reverse для начала вертикального направления с противоположной стороны.

Элемент гибкости 1
Элемент гибкости 2
Элемент гибкости 3
Элемент гибкости 1
Элемент гибкости 2
Элемент гибкости 3
<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-direction.

Justify content

Используйте justify-content служебные программы на контейнерах flexbox, чтобы изменить выравнивание гибких элементов по главной оси (ось x для начала, ось y, если flex-direction: column). Выберите из start (браузера по умолчанию), end, center, between, around, или evenly.

Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
<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.

Align items

Используйте align-items служебные программы в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по поперечной оси (ось Y в начале, ось X, если flex-direction: column). Выберите из start, end, center, baseline, или stretch (браузер по умолчанию).

Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
<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-items.

Align self

Используйте align-self служебные программы для элементов Flexbox, чтобы индивидуально изменить их выравнивание по поперечной оси (ось Y для начала, ось X, если flex-direction: column). Выберите один из вариантов , как же align-items: start, end, center, baseline или stretch (браузер по умолчанию).

Элемент Flex
Выровненный гибкий элемент
Элемент Flex
Элемент Flex
Выровненный гибкий элемент
Элемент Flex
Элемент Flex
Выровненный гибкий элемент
Элемент Flex
Элемент Flex
Выровненный гибкий элемент
Элемент Flex
Элемент Flex
Выровненный гибкий элемент
Элемент Flex
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Адаптивные варианты также существуют для align-self.

Fill

Используйте .flex-fill класс для серии элементов-братьев, чтобы заставить их иметь ширину, равную их содержимому (или равную ширину, если их содержимое не превышает их границы), занимая при этом все доступное горизонтальное пространство.

Гибкий элемент с большим количеством контента
Элемент Flex
Элемент Flex
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

Адаптивные варианты также существуют для flex-fill.

Grow и shrink

Используйте .flex-grow-* утилиты для переключения способности гибкого элемента увеличиваться, чтобы заполнить доступное пространство. В приведенном ниже примере .flex-grow-1 элементы используют все доступное пространство, в то время как оставшимся двум гибким элементам предоставляется необходимое пространство.

Элемент Flex
Элемент Flex
Третий гибкий элемент
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

Используйте .flex-shrink-* утилиты для переключения возможности гибкого элемента сжиматься при необходимости. В приведенном ниже примере второй гибкий элемент с .flex-shrink-1 принудительно переносит свое содержимое в новую строку, «сжимаясь», чтобы освободить больше места для предыдущего гибкого элемента с .w-100.

Элемент Flex
Элемент Flex
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

Адаптивные варианты также существуют для flex-growи flex-shrink.

Авто margin

Flexbox может делать несколько замечательных вещей, когда вы смешиваете выравнивание гибкости с автоматическими полями. Ниже показаны три примера управления гибкими элементами с помощью автоматических полей: по умолчанию (без автоматического поля), перемещение двух элементов вправо ( .mr-auto) и перемещение двух элементов влево ( .ml-auto).

Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

With align-items

Вертикально переместить один гибкий элемент в верхней или нижней части контейнера путем смешивания align-items, flex-direction: columnи margin-top: autoили margin-bottom: auto.

Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

Wrap

Измените способ переноса гибких элементов в гибкий контейнер. Выберите вариант без обтекания (по умолчанию в браузере) .flex-nowrap, обертывание с помощью .flex-wrapили обратное обертывание с помощью .flex-wrap-reverse.

Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
<div class="d-flex flex-nowrap">
  ...
</div>
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
<div class="d-flex flex-wrap">
  ...
</div>
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Адаптивные варианты также существуют для flex-wrap.

Order

Измените визуальный порядок определенных гибких элементов с помощью нескольких order утилит. Мы предоставляем только варианты для того, чтобы сделать элемент первым или последним, а также выполнить сброс для использования порядка DOM. Как и order любое целочисленное значение от 0 до 5, добавьте собственный CSS для любых дополнительных значений.

Первый гибкий элемент
Второй гибкий элемент
Третий гибкий элемент
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

Адаптивные варианты также существуют для order.

Кроме того, существуют также адаптивные классы .order-first и .order-last классы, которые изменяют order элемент, применяя order: -1и order: 6, соответственно.

Align content

Используйте align-content утилиты на контейнерах flexbox, чтобы выровнять гибкие элементы вместе по поперечной оси. Выберите из start(браузера по умолчанию), end, center, between, around, или stretch. Чтобы продемонстрировать эти утилиты, мы усилили flex-wrap: wrap и увеличили количество гибких элементов.

Берегись! Это свойство не влияет на отдельные строки гибких элементов.

Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
<div class="d-flex align-content-end flex-wrap">...</div>
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
<div class="d-flex align-content-center flex-wrap">...</div>
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
<div class="d-flex align-content-between flex-wrap">...</div>
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
<div class="d-flex align-content-around flex-wrap">...</div>
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
<div class="d-flex align-content-stretch flex-wrap">...</div>

Адаптивные варианты также существуют для align-content.

Комментарии для сайта Cackle