Flex

Включение «гибкого» поведения

Применяйте утилиты display для создания гибкого контейнера и трансформируйте прямые дочерние элементы в «гибкие». Гибкие контейнеры и элементы можно изменять дополнительными свойствами гибкости.

<divclass="d-flex p-2">Я контейнер Flexbox!</div>

<divclass="d-inline-flex p-2">Я встроенный контейнер Flexbox!</div>

Адаптивные варианты также существуют для .d-flex и .d-inline-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

Направление

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

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

<divclass="d-flex flex-row mb-3"><divclass="p-2">Флекс элемент 1</div><divclass="p-2">Флекс элемент 2</div><divclass="p-2">Флекс элемент 3</div></div><divclass="d-flex flex-row-reverse"><divclass="p-2">Флекс элемент 1</div><divclass="p-2">Флекс элемент 2</div><divclass="p-2">Флекс элемент 3</div></div>

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

<divclass="d-flex flex-column mb-3"><divclass="p-2">Флекс элемент 1</div><divclass="p-2">Флекс элемент 2</div><divclass="p-2">Флекс элемент 3</div></div><divclass="d-flex flex-column-reverse"><divclass="p-2">Флекс элемент 1</div><divclass="p-2">Флекс элемент 2</div><divclass="p-2">Флекс элемент 3</div></div>

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

• .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 в контейнерах flexbox, чтобы изменить выравнивание элементов Флекс по главной оси (ось x для начала, ось y, если flex-direction: column). Выберите start (по умолчанию в браузере), end, center, between, around или evenly.

<divclass="d-flex justify-content-start">...</div><divclass="d-flex justify-content-end">...</div><divclass="d-flex justify-content-center">...</div><divclass="d-flex justify-content-between">...</div><divclass="d-flex justify-content-around">...</div><divclass="d-flex justify-content-evenly">...</div>

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

• .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

Выравнивание элементов

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

<divclass="d-flex align-items-start">...</div><divclass="d-flex align-items-end">...</div><divclass="d-flex align-items-center">...</div><divclass="d-flex align-items-baseline">...</div><divclass="d-flex align-items-stretch">...</div>

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

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch
• .align-items-xxl-start
• .align-items-xxl-end
• .align-items-xxl-center
• .align-items-xxl-baseline
• .align-items-xxl-stretch

Сплошное выравнивание

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

<divclass="align-self-start">Выровненный Флекс элемент</div><divclass="align-self-end">Выровненный Флекс элемент</div><divclass="align-self-center">Выровненный Флекс элемент</div><divclass="align-self-baseline">Выровненный Флекс элемент</div><divclass="align-self-stretch">Выровненный Флекс элемент</div>

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

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch
• .align-self-xxl-start
• .align-self-xxl-end
• .align-self-xxl-center
• .align-self-xxl-baseline
• .align-self-xxl-stretch

Заполнение

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

<divclass="d-flex"><divclass="p-2 flex-fill">Флекс элемент с большим количеством контента</div><divclass="p-2 flex-fill">Флекс элемент</div><divclass="p-2 flex-fill">Флекс элемент</div></div>

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

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-fill
• .flex-xxl-fill

Увеличение и уменьшение

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

<divclass="d-flex"><divclass="p-2 flex-grow-1">Флекс элемент</div><divclass="p-2">Флекс элемент</div><divclass="p-2">Третий флекс элемент</div></div>

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

<divclass="d-flex"><divclass="p-2 w-100">Флекс элемент</div><divclass="p-2 flex-shrink-1">Флекс элемент</div></div>

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

• .flex-{grow|shrink}-0
• .flex-{grow|shrink}-1
• .flex-sm-{grow|shrink}-0
• .flex-sm-{grow|shrink}-1
• .flex-md-{grow|shrink}-0
• .flex-md-{grow|shrink}-1
• .flex-lg-{grow|shrink}-0
• .flex-lg-{grow|shrink}-1
• .flex-xl-{grow|shrink}-0
• .flex-xl-{grow|shrink}-1
• .flex-xxl-{grow|shrink}-0
• .flex-xxl-{grow|shrink}-1

Автоматические поля

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

<divclass="d-flex mb-3"><divclass="p-2">Флекс элемент</div><divclass="p-2">Флекс элемент</div><divclass="p-2">Флекс элемент</div></div><divclass="d-flex mb-3"><divclass="me-auto p-2">Флекс элемент</div><divclass="p-2">Флекс элемент</div><divclass="p-2">Флекс элемент</div></div><divclass="d-flex mb-3"><divclass="p-2">Флекс элемент</div><divclass="p-2">Флекс элемент</div><divclass="ms-auto p-2">Флекс элемент</div></div>

С элементами выравнивания

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

<divclass="d-flex align-items-start flex-column mb-3"style="height: 200px;"><divclass="mb-auto p-2">Флекс элемент</div><divclass="p-2">Флекс элемент</div><divclass="p-2">Флекс элемент</div></div><divclass="d-flex align-items-end flex-column mb-3"style="height: 200px;"><divclass="p-2">Флекс элемент</div><divclass="p-2">Флекс элемент</div><divclass="mt-auto p-2">Флекс элемент</div></div>

Обертка

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

<divclass="d-flex flex-nowrap"> ...
</div>

<divclass="d-flex flex-wrap"> ...
</div>

<divclass="d-flex flex-wrap-reverse"> ...
</div>

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

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse
• .flex-xxl-nowrap
• .flex-xxl-wrap
• .flex-xxl-wrap-reverse

Порядок

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

<divclass="d-flex flex-nowrap"><divclass="order-3 p-2">Первый флекс элемент</div><divclass="order-2 p-2">Второй флекс элемент</div><divclass="order-1 p-2">Третий флекс элемент</div></div>

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

• .order-0
• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xxl-0
• .order-xxl-1
• .order-xxl-2
• .order-xxl-3
• .order-xxl-4
• .order-xxl-5

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

• .order-first
• .order-last
• .order-sm-first
• .order-sm-last
• .order-md-first
• .order-md-last
• .order-lg-first
• .order-lg-last
• .order-xl-first
• .order-xl-last
• .order-xxl-first
• .order-xxl-last

Выравнивание содержимого

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

Внимание! Это свойство не влияет на отдельные строки элементов Флекс.

<divclass="d-flex align-content-start flex-wrap"> ...
</div>

<divclass="d-flex align-content-end flex-wrap">...</div>

<divclass="d-flex align-content-center flex-wrap">...</div>

<divclass="d-flex align-content-between flex-wrap">...</div>

<divclass="d-flex align-content-around flex-wrap">...</div>

<divclass="d-flex align-content-stretch flex-wrap">...</div>

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

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-between
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-between
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-between
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-between
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-between
• .align-content-xl-around
• .align-content-xl-stretch
• .align-content-xxl-start
• .align-content-xxl-end
• .align-content-xxl-center
• .align-content-xxl-between
• .align-content-xxl-around
• .align-content-xxl-stretch

Медиа объект

Хотите скопировать компонент мультимедийного объекта из Bootstrap 4? В мгновение ока воссоздайте его с помощью нескольких гибких утилит, которые обеспечивают еще большую гибкость и настройку, чем раньше.

<divclass="d-flex"><divclass="flex-shrink-0"><imgsrc="..."alt="..."></div><divclass="flex-grow-1 ms-3"> Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.
</div></div>

И если вы хотите вертикально центрировать содержимое рядом с изображением:

<divclass="d-flex align-items-center"><divclass="flex-shrink-0"><imgsrc="..."alt="..."></div><divclass="flex-grow-1 ms-3"> Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.
</div></div>

CSS

Sass API утилиты

Утилиты флексбокс объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

"flex":(responsive:true,property:flex,values:(fill:11auto)),"flex-direction":(responsive:true,property:flex-direction,class:flex,values:rowcolumnrow-reversecolumn-reverse),"flex-grow":(responsive:true,property:flex-grow,class:flex,values:(grow-0:0,grow-1:1,)),"flex-shrink":(responsive:true,property:flex-shrink,class:flex,values:(shrink-0:0,shrink-1:1,)),"flex-wrap":(responsive:true,property:flex-wrap,class:flex,values:wrapnowrapwrap-reverse),"justify-content":(responsive:true,property:justify-content,values:(start:flex-start,end:flex-end,center:center,between:space-between,around:space-around,evenly:space-evenly,)),"align-items":(responsive:true,property:align-items,values:(start:flex-start,end:flex-end,center:center,baseline:baseline,stretch:stretch,)),"align-content":(responsive:true,property:align-content,values:(start:flex-start,end:flex-end,center:center,between:space-between,around:space-around,stretch:stretch,)),"align-self":(responsive:true,property:align-self,values:(auto:auto,start:flex-start,end:flex-end,center:center,baseline:baseline,stretch:stretch,)),"order":(responsive:true,property:order,values:(first:-1,0:0,1:1,2:2,3:3,4:4,5:5,last:6,),),