Bootstrap 4 justify content center: Bootstrap 4 — Классы для работы с flexbox

Содержание

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 класс:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

Чтобы создать встроенный контейнер Flexbox, используйте d-inline-flex класс:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

Горизонтальное направление

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

Совет: используйте .flex-row-reverse Выравнивание по горизонтали по правому краю:

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

Вертикальное направление

Используется .flex-column для отображения элементов Flex вертикально (поверх друг друга) или для изменения .flex-column-reverse вертикального направления:

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

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

Используйте . justify-content-* классы для изменения выравнивания элементов Flex. Допустимые классы start (по умолчанию),,, end center between или around:

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

Заливка/равная ширина

Используйте .flex-fill для элементов Flex, чтобы заставить их в равной ширины:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

Grow

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

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

Совет: Используйте .flex-shrink-1 на Flex элемент, чтобы сделать его сжатие, если это необходимо.

Order

Изменение визуального порядка конкретных элементов Flex с помощью .order классов. Допустимые классы от 0 до 12, где наименьшее число имеет наивысший приоритет (Order-1 отображается перед порядком-2 и т.д.):

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

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

С легкостью добавляйте автоматические поля в элементы Flex . mr-auto (нажимайте элементы вправо) или с помощью .ml-auto (передвиньте элементы влево):

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

Обернуть

Управление переносом элементов Flex в контейнер Flex с помощью .flex-nowrap (по умолчанию) .flex-wrap или .flex-wrap-reverse.

Нажмите на кнопки ниже, чтобы увидеть разницу между тремя классами, по Чанг в упаковке Flex элементов в примере поле:

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

Flex item 16

Flex item 17

Flex item 18

Flex item 19

Flex item 20

Flex item 21

Flex item 22

Flex item 23

Flex item 24

Flex item 25

Пример

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

Управление вертикальным выравниванием собранных элементов Flex с помощью .align-content-* классов. Допустимые классы .align-content-start (по умолчанию),,,, .align-content-end .align-content-center .align-content-between .align-content-around и .align-content-stretch .

Примечание: Эти классы не влияют на отдельные строки элементов Flex.

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами, изменив вертикальное выравнивание элементов Flex в поле пример:

Example

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

Flex item 16

Flex item 17

Flex item 18

Flex item 19

Flex item 20

Flex item 21

Flex item 22

Flex item 23

Flex item 24

Flex item 25

Пример

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

Управление вертикальным выравниванием отдельных строк элементов Flex с помощью .align-items-* классов. Допустимые классы .align-items-start:, .align-items-end, .align-items-center .align-items-baseline и .align-items-stretch (по умолчанию).

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

Выравнивание себя

Управление вертикальным выравниванием заданного элемента Flex с классами . align-self-*. Допустимые классы .align-self-start:, .align-self-end, .align-self-center .align-self-baseline и .align-self-stretch (по умолчанию).

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами:

Example

Flex item 1

Flex item 2

Flex item 3

Пример

Адаптивные классы 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`	Растянуть гибкий элемент на разных экранах

❮ Назад Дальше ❯

Flex · Bootstrap v5.0

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

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

Я контейнер Flexbox!

<div>Я контейнер Flexbox!</div>

Я встроенный контейнер Flexbox!

<div>Я встроенный контейнер 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, чтобы начать горизонтальное направление с противоположной стороны.

Флекс элемент 1

Флекс элемент 2

Флекс элемент 3

Флекс элемент 1

Флекс элемент 2

Флекс элемент 3

<div>
  <div>Флекс элемент 1</div>
  <div>Флекс элемент 2</div>
  <div>Флекс элемент 3</div>
</div>
<div>
  <div>Флекс элемент 1</div>
  <div>Флекс элемент 2</div>
  <div>Флекс элемент 3</div>
</div>

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

Флекс элемент 1

Флекс элемент 2

Флекс элемент 3

Флекс элемент 1

Флекс элемент 2

Флекс элемент 3

<div>
  <div>Флекс элемент 1</div>
  <div>Флекс элемент 2</div>
  <div>Флекс элемент 3</div>
</div>
<div>
  <div>Флекс элемент 1</div>
  <div>Флекс элемент 2</div>
  <div>Флекс элемент 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.

Флекс элемент

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</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 (по умолчанию в браузере).

Флекс элемент

<div>. ..</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</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 (по умолчанию в браузере).

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

<div>Выровненный Флекс элемент</div>
<div>Выровненный Флекс элемент</div>
<div>Выровненный Флекс элемент</div>
<div>Выровненный Флекс элемент</div>
<div>Выровненный Флекс элемент</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 для серии родственных элементов, чтобы заставить их ширину равную их содержимому (или равную ширину, если их содержимое не превышает их границы), занимая при этом все доступное горизонтальное пространство.

Флекс элемент с большим количеством контента

Флекс элемент

<div>
  <div>Флекс элемент с большим количеством контента</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</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 используют все доступное пространство, которое могут, а оставшимся двум элементам Флекс их необходимое пространство.

Флекс элемент

Third Флекс элемент

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Third Флекс элемент</div>
</div>

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

Флекс элемент

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</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) .

Флекс элемент

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>
<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>
<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

С помощью align-items

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

Флекс элемент

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>
<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

Обертка

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

Флекс элемент

<div>
  ...
</div>

Флекс элемент

<div>
  . ..
</div>

Флекс элемент

<div>
  ...
</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 для любых дополнительных значений.

First Флекс элемент

Second Флекс элемент

Third Флекс элемент

<div>
  <div>First Флекс элемент</div>
  <div>Second Флекс элемент</div>
  <div>Third Флекс элемент</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 и увеличили количество элементов Флекс.

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

Флекс элемент

<div>
  ...
</div>

Флекс элемент

<div>...</div>

Флекс элемент

<div>. ..</div>

Флекс элемент

<div>...</div>

Флекс элемент

<div>...</div>

Флекс элемент

<div>. ..</div>

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

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

Медиа объект

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

PlaceholderИзображение

Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.

<div>
  <div>
    <img src="..." alt="...">
  </div>
  <div>
    Это какой-то контент из медиа-компонента.  Вы можете заменить его любым содержимым и при необходимости отрегулировать его.
  </div>
</div>

And say you want to vertically center the content next to the image:

PlaceholderИзображение

<div>
  <div>
    <img src="..." alt="...">
  </div>
  <div>
    Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.
  </div>
</div>

Sass

API утилит

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

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-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: wrap nowrap wrap-reverse
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "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,
      ),
    ),

Bootstrap 4 Вертикальный центр.

Как выровнять что-нибудь по вертикали | Кэрол Скелли | WDstack

Как выровнять что-либо по вертикали

Это сложно.

Вертикальное выравнивание элементов по центру всегда было проблемой в CSS, не говоря уже о Bootstrap. В этой статье я рассмотрю все новых подходов в Bootstrap 4 , которые проще вертикального центра в Bootstrap 3.

Теперь, когда Bootstrap 4 по умолчанию flexbox, вертикальное выравнивание становится немного проще. В общем, существует 3 разных подхода к вертикальному выравниванию…

Авто-поля
Утилиты Flexbox
Утилиты отображения вместе с утилитами вертикального выравнивания.

Поначалу утилиты «Выравнивание по вертикали» могут показаться очевидным выбором, но они работают только со встроенными и табличными элементами отображения. Рассмотрите следующие варианты и сценарии вертикального выравнивания.

В целом существует 2 типа сценариев вертикального выравнивания, с которыми вы столкнетесь…

вертикальное центрирование внутри родительского контейнера.
или вертикальное центрирование относительно соседних элементов.

1 — Вертикальное центрирование с использованием автоматических полей

Один из способов вертикального центрирования — использовать my-auto . Это отцентрирует элемент внутри контейнера flexbox (Bootstrap 4 .row равен дисплей: flex ). Например, h-100 делает строку полной высоты, а my-auto вертикально центрирует столбец col-sm-12 .

  
  
 Card

my-auto представляет поля по вертикальной оси Y и эквивалентно:

 поле-сверху: авто; 
 нижняя граница: авто;

Демонстрация — вертикальное центрирование с использованием автоматических полей

2 — Вертикальный центр с Flexbox

Поскольку класс Bootstrap 4 . row теперь равен display:flex , вы можете просто использовать новую утилиту align-self-center vertical flexbox для любого столбца . по центру:

  
  
  
 По центру 
 
 
 < /div> 
  
  
 Taller

или используйте align-items-center для всего .row для вертикального выравнивания по центру все col-* (columns ) в строке…

  
  
  
 Center 
 
 
 
 
  
  
 Taller

Демонстрация — Вертикальный центр Разная высота Смежные столбцы

3 — Вертикальный центр Использование Display Utils

Bootstrap 4 теперь имеет display utils используются обертки для свойств отображения CSS, таких как display:block , display:inline , display:table-cell, display:none и т. д. Их можно использовать с утилитами вертикального выравнивания для выравнивания встроенного , встроенный блок или элементы ячейки таблицы.

  
  
  
 Я грут 4 Вертикальное центрирование в картах одинаковой высоты 
 Bootstrap 4 Вертикальное центрирование с помощью карт 
  Чтобы следить за последними разработками, примерами и темами Bootstrap 4, также ознакомьтесь с моим Bootstrap4.guide 
  Flex - Bootstrap 4.2 - 日本語リファレンス  
          Flex (フレックス) を と と, 配置 など の レイアウト を 簡単 行え ます。 複雑 な 実装 は カスタム CSS が 必要 です。 
        
        

   Flexの動作を有効にする (включить гибкое поведение)  
   дисплей  を適用して, Flexコンテナを作成し, 子要素をFlexアイテムに変換できます。 
  Я флексбокс-контейнер! 
  Я контейнер flexbox!
 
 Я встроенный контейнер flexbox!
 Я встроенный контейнер flexbox!
 
  .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 
 方向(Направление) 
  direction  を使用して, コンテナのFlexアイテムの方向を設定できます。 
 ほとんどの場合, ブラウザのデフォルトが  row  なので, 左から横並びのクラスは省略可能です。
  .flex-row  : 左から横並び
  .flex-row-reverse  : 右から横並び
 Flex-элемент 1
 Flex-элемент 2
 Flex-элемент 3
 Flex-элемент 1
 Flex-элемент 2
 Flex-элемент 3
 <дел>
  Элемент Flex 1
  Элемент Flex 2
  Элемент Flex 3

<дел>
  Элемент Flex 1
  Элемент Flex 2
  Элемент Flex 3

縦並びの設定では

. flex-column : 上から縦並び
.flex-column-reverse : 下から縦並び

Flex-элемент 1

Flex-элемент 2

Flex-элемент 3

Flex-элемент 1

Flex-элемент 2

Flex-элемент 3

 <дел>
  Элемент Flex 1
  Элемент Flex 2
  Элемент Flex 3

<дел>
Элемент Flex 1

Элемент Flex 2

Элемент Flex 3

レスポンシブな設定では flex-direction を使用します。
.flex-ряд
.flex-ряд-реверс
.flex-столбец
.flex-колонка-реверс
.flex-см-строка
.flex-sm-row-reverse
.flex-sm-столбец
.flex-sm-column-reverse
.flex-MD-строка
.flex-md-row-reverse
. flex-MD-столбец
.flex-md-column-reverse
.flex-lg-строка
.flex-lg-ряд-реверс
.flex-lg-столбец
.flex-lg-колонка-реверс
.flex-XL-ряд
.flex-xl-строка-реверс
.flex-xl-столбец
.flex-xl-колонка-реверс
Содержимое по ширине
justify-content では下記を使用できます。( flex-direction: column を適用するとy軸になります。) начало , конец , центр , между , вокруг を使用できます。
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
5 Flex item
50005
Flex-элемент
Flex-элемент
Flex-элемент
Flex-элемент
Flex-элемент
<дел>. .. <дел>... <дел>... <дел>...
...

justify-content はレスポンシブにも対応しています。
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-между
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-центр
.justify-content-sm-между
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-между
.justify-content-md- вокруг
.justify-content-lg-start
. justify-content-lg-end
.justify-content-lg-центр
.justify-content-lg-между
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-центр
.justify-content-xl-между
.justify-content-xl-вокруг
アイテムの整列(Выровнять элементы)
align-items を使用してFlexアイテムの配置を変更できます。 начало , конец , центр , базовая линия , растяжка を使用できます。
Гибкий элемент
Гибкий элемент
Гибкий элемент
Flex Item
Flex Item
Elex Item
Elex Item
Elex Item
Исключенное изделия
Элемент сгибания
Elect Item
Elect
Item
Elect
.
<дел>... <дел>... <дел>... <дел>...
...

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-базовый уровень
.align-items-xl-stretch
特定アイテムの整列(Выровнять себя)
align-self を適用して特定のアイテムの配置を変更できます。
start , end , center , baseline , stretch を使用できます。
Flex Item
Выровненное изгиб -элемент
Flex Item
Flex Item
Выровненное изгиб
Elex Item
Elex
Выровненное изгиб
Flex Item
Elem. item
Flex item
Выровненный Flex item
Flex item

Выровненный гибкий элемент

Выровненный гибкий элемент

Выровненный гибкий элемент

Выровненный гибкий элемент

Выровненный гибкий элемент

Также существуют адаптивные варианты для align-self . align-self はレスポンシブにも対応しています。
.align-self-start
.align-self-end
.align-self-center
.align-self-базовый уровень
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-центр
.align-self-sm-базовый уровень
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-центр
.align-self-md-базовый уровень
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-центр
.align-self-lg-базовый уровень
. align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-центр
.align-self-xl-базовый уровень
.align-self-xl-stretch
Заполнение
.flex-fill (Flex: 1 1 Auto) をしてて, 水平を占有ししながら, 同じ幅強制できます。幅幅均等幅ので特に便利。。幅または均幅ので特にです。。幅または等幅0005
Flex item
Flex item
Flex item
<дел>
Элемент Flex

Элемент Flex

Элемент Flex