Содержание

Flex. Утилиты · Bootstrap. Версия v4.0.0

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

Задействуйте «гибкое» поведение

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

Я — контейнер 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

Направление

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

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

Flex элемент 1

Flex элемент 2

Flex элемент 3

Flex элемент 1

Flex элемент 2

Flex элемент 3

<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>
<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>

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

Flex элемент 1

Flex элемент 2

Flex элемент 3

Flex элемент 1

Flex элемент 2

Flex элемент 3

<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>
<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 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

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

Пользуйтесь утилитами justify-content или контейнерами флексбокса для изменения выравнивания гибких элементов по главной оси (ось х по умолчанию, ось у – если

flex-direction: column). Выбирайте из start (умолчание браузера), end, center, between или around.

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<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-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • . justify-content-xl-between
  • .justify-content-xl-around

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

Используйте утилиты align-items в контейнерах флексбокса для изменения выравнивания гибких элементов по перекрестной оси (ось у по умолч., ось х – если flex-direction: column). Выбирайте из start, end

, center, baseline или stretch (умолчание браузера).

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<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 self

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

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</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

Авто-марджины

Флексбокс может невероятные вещи – если вы сочетаете выравнивание гибких элементов с авто-марджинами. Три примера ниже показывают контроль над гибкими элементами через авто-марджины: 1. по умолчанию (нет авто-марджина), 2. «прижимаем» два элемента к правому краю (.mr-auto), 3. «прижимаем» два элемента к левому краю (.ml-auto).

К несчастью, IE10 и IE11 не очень-то поддерживают авто-марджины в гибких элементах, чьи «родительские элементы» имеют атрибут justify-content. Смотри детали здесь.

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

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

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

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

Обертка

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

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  . ..
</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  ...
</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<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

Порядок

Мы создали параметры лишь для придания элементу первого или последнего порядкового положения, как и для сброса данной настройки для использования порядка DOM. Так как order принимает цифровое значение (например, 5), добавьте обычный CSS для создания необходимых дополнительных значений.

Первый flex элемент

Второй flex элемент

Третий flex элемент

<div>
  <div>Первый flex элемент</div>
  <div>Второй flex элемент</div>
  <div>Третий flex элемент</div>
</div>

Отзывчивые вариации есть также для order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • . order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • . order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

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

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

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

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  ...
</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>. ..</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>. ..</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<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

Bootstrap 4: разница между text-center и justify-content-center



И text-center, и justify-content-center, похоже, делают почти одно и то же — центрируют текст. Но какая разница?

css twitter-bootstrap bootstrap-4
Поделиться Источник Daud     16 ноября 2018 в 06:59

2 ответа


  • «justify-content-md-end » и» justify-content-center » ведут себя противоположно друг другу

    Насколько я понимаю, когда я использую justify-content-md-end, он должен позиционировать содержимое вправо, когда окно сжимается. И justify-content-center должен расположить его в центре, когда окно имеет полный размер. Однако в моем случае они ведут себя совершенно противоположно. Регистрация…

  • Bootstrap 4 CSS — justify-content-center выпуск

    Я пытаюсь центрировать каждую форму. (вход и регистрация ) внутри соответствующих столбцов. Это OK для первого, но не для второго. Вот css, который я использую. Что же в этом плохого? <section id=login> <div class=container> <div class=row> <div class=col. ..



2

текстовый центр

Свойство text-align CSS определяет горизонтальное выравнивание встроенного поля или ячейки таблицы. Это означает, что он работает как вертикальное выравнивание, но в горизонтальном направлении. — MDN

.text-center {
  text-align: center !important;
}

text-center выравнивает встроенный элемент и элемент ячейки таблицы по центру элемента, для которого он используется. Он не изменяет выравнивание элементов блока .


justify-content-center

Элементы упаковываются заподлицо друг к другу по направлению к центру контейнера выравнивания вдоль главной оси.

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

Чтобы это сработало, вам также нужно использовать d-flex . Он выравнивает все содержимое элемента (inline ,block и flex), для которого вы его используете, по центру элемента. По умолчанию содержимое элемента центрируется по горизонтали, если вы не изменили flex-direction элемента.


Вы можете найти эти ссылки полезными.

Поделиться mahan     16 ноября 2018 в 09:01



2

Bootstrap 4 не поддерживает justify-text-center .

Источник: Текст


Может быть, вы ищете что-то вроде этого:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<p>Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum.  Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

<p>Center aligned text on all viewport sizes.</p>

Я имел в виду, justify-content-center

Разница заключается в следующем: justify-content-* используется для изменения выравнивания элементов flex .

Если div не имеет свойства display: flex . Кажется, это не работает. В то время как text-center не требует свойства display: flex .

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<hr />

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Поделиться Tân     16 ноября 2018 в 07:02


Похожие вопросы:


В чем разница между margin:auto и justify-content / align-items center?

Чтобы центрировать как горизонтально, так и вертикально одновременно, есть два простых варианта: Первый . outer { display:flex; } .inner { margin:auto; } Второй .outer { display: flex;…


Bootstrap 4 : ‘.flex-column’ работает, но не ‘.justify-content-center’

Я работаю над каким-то старым кодом и пытаюсь правильно разместить контент на своей странице, но сталкиваюсь с проблемой : мои свойства flex работают, но не. justify-content -…. Вот мой код :…


Как придать justify-content-center выравнивание штабелируемым столбцам

Мне нужен адаптивный макет с x столбцами, который показывает 3 столбца в строке на lg размерах экрана, выровненных по justify-content-between . В тот момент , когда экран меньше, чем lg , все…


«justify-content-md-end » и» justify-content-center » ведут себя противоположно друг другу

Насколько я понимаю, когда я использую justify-content-md-end, он должен позиционировать содержимое вправо, когда окно сжимается. И justify-content-center должен расположить его в центре, когда окно…


Bootstrap 4 CSS — justify-content-center выпуск

Я пытаюсь центрировать каждую форму. (вход и регистрация ) внутри соответствующих столбцов. Это OK для первого, но не для второго. Вот css, который я использую. Что же в этом плохого? <section…


сломать тег с justify-content-center в bootstrap 4

Я пытаюсь сделать что-то подобное . И способен разместить свой текст прямо посередине вертикали и горизонтали. Но тег break <br> с этим не работает. <div class=container h-100> <div…


QUASAR — Justify-center и screen breakpoints

У меня возникла эта проблема, я искал на форуме, но не нашел ничего связанного. Я пытаюсь использовать justify-center для маленьких экранов и justify-end для больших экранов. Читая документы я нашел…


Почему я не могу объединить justify-content-center и justify-content-lg-left в Bootstrap 4?

У меня есть Bootstrap 4 Jumbotron , содержащий столбец, установленный на разной ширине сетки в зависимости от точки останова. Это здорово , но я также хочу установить столбец влево или в центр. ..


Bootstrap 4-достижение flex + justify-content-center с 2 элементами

Используя d-flex , justify-content-center и flew-grow-1 , я достиг желаемого результата с 3 дивами. <div class=row bg-primary d-flex justify-content-center> <div class=col-auto> LEFT…


почему justify-content-center не работает в react?

Я сейчас учусь reactjs! Я создал компонент класса с именем WritePostArea и внутри этого компонента использовал класс начальной загрузки с именем justify-content-center для центрирования элемента. Я…

Bootstrap 4 по центру вертикального и горизонтального выравнивания

Обновление 2019 Bootstrap 4.3.1

Там нет необходимости для дополнительного CSS . То, что уже включено в Bootstrap, будет работать. Убедитесь, что контейнер (ы) формы в полный рост . Bootstrap 4 теперь имеет h-100класс для 100% роста . ..

Вертикальный центр:

<div>
  <div>
    <form>
      <div>
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" placeholder="Example input">
      </div>
      <div>
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

высота контейнера с пунктом (пунктами) по центру должна составлять 100% (или независимо от желаемой высоты относительно центрального элемента)

Примечание. При использовании height:100%( процентной высоты ) для любого элемента, элемент принимает высоту своего контейнера . В современных браузерах height:100vh;вместо %получения желаемой высоты могут использоваться единицы vh .

Поэтому вы можете установить html, body {height: 100%} или использовать новый min-vh-100класс для контейнера вместо h-100.


Горизонтальный центр:

  • text-centerцентрировать display:inlineэлементы и содержимое столбца
  • mx-auto для центрирования внутри гибких элементов
  • offset-*или mx-autoможет быть использован для центрирования столбцов ( .col-)
  • justify-content-centerв колонках центра ( col-*) внутриrow

Вертикальное выравнивание по центру в Bootstrap 4
Bootstrap 4 полноэкранная центрированная форма
Bootstrap 4 центральная группа ввода
Bootstrap 4 по горизонтали + вертикальный центр по всему экрану

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

Пример

<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

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

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>


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

Используется . 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 item 1
  Flex item 2
  Flex item 3

<div class=»d-flex flex-row-reverse bg-secondary»>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>


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

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

Пример

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

<div class=»d-flex flex-column-reverse»>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>



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

Используйте . 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

Пример

<div>…</div>
<div>…</div>
<div>…</div>
<div>…</div>
<div>…</div>


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

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

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>


Grow

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

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

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


Order

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

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>


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

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

Пример

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

<div>
  <div class=»p-2 bg-info»>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>


Обернуть

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

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

flex-wrap flex-wrap-reverse flex-nowrap

Пример

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

Пример

. .

<div>..</div>

<div>..</div>


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

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

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

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

align-content-start align-content-end align-content-center align-content-around align-content-stretch

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

Пример

. .

<div>..</div>

<div>..</div>

<div>..</div>

<div>..</div>


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

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

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

align-items-start align-items-end align-items-center align-items-baseline align-items-stretch

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

..

<div>..</div>

<div>..</div>

<div>..</div>

<div>..</div>


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

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

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

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

Пример

<div>
  <div class=»p-2 border»>Flex item 1</div>
  <div>Flex item 2</div>
  <div class=»p-2 border»>Flex item 3</div>
</div>


Адаптивные классы 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

важно!вертикальный центр относительно высота родитель

если родитель элемента, который вы пытаетесь центрировать, не определен высота,нет из вертикальных центрирующих решений будет работать!

теперь, на вертикальное центрирование в Bootstrap 4. ..

можно использовать flexbox & размер коммунальные услуги сделать container полный рост и display: flex. Эти варианты не требуется дополнительный CSS (за исключением высота контейнера (т. е. html,body) должна быть 100%).

1 align-self-center на Flexbox child

<div>
    <div>
     I'm vertically centered
    </div>
</div>

2 align-items-center на основе родительского элемента (.row is display:flex; flex-direction:row)

<div>
    <div>
        <div>
            <div>
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

3 justify-content-center на основе родительского элемента (. card и display:flex;flex-direction:column)

<div>
    <div>
        <div>
            <div>
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>


подробнее о вертикальном центрировании Bootstrap 4

теперь, когда Bootstrap 4 предлагает flexbox и другой коммунальные услуги, есть много подходов к вертикали выравнивание. http://www.codeply.com/go/WG15ZWC4lf

1-Вертикальный Центр С Использованием Авто Полей:

другой способ вертикального центра-использовать my-auto. Это будет центр элемента в контейнер. Например, h-100 делает строку полной высоты, и my-auto вертикально-центр .

<div>
    <div>
        <div>Card</div>
    </div>
</div>

Вертикальный Центр С Помощью Авто Поля демо

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

margin-top: auto;
margin-bottom: auto;

2-вертикальный центр с Flexbox:

Начиная С Bootstrap 4 . row теперь display:flex вы можете просто использовать align-self-center на любом столбце, чтобы вертикально центрировать его…

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

или align-items-center на всю .row вертикально центр выровнять все col-* в строке…

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

Вертикальный Центр Различной Высоты Столбцов демо


3-Вертикальный Центр С Помощью Дисплея Utils:

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

<div>
    <div>
        <div>
            I am centered vertically
        </div>
    </div>
</div>

Вертикальный Центр С Помощью Дисплея Utils демо

примеры
вертикальное изображение центра в <div>
вертикальный центр .греби туда .контейнер
вертикальный центр и низ в <div>
вертикальный центр ребенка внутри родителя
вертикальный центр полный экран верзила


важно!я упоминал высоту?

помните, что вертикальное центрирование относительно высота родителя элемент. Если вы хотите сосредоточиться на всей странице, в большинстве случаев это должен быть ваш CSS…

body,html {
  height: 100%;
}

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

Смотрите также:
вертикальное выравнивание в bootstrap 4
Bootstrap 4 Центр вертикальное и горизонтальное выравнивание

css — Вертикальное и горизонтальное выравнивание центра начальной загрузки

Bootstrap 5 (обновлено в 2021 г.)

Bootstrap 5 по-прежнему основан на flexbox , поэтому вертикальное центрирование работает так же, как и в Bootstrap 4. Например, align-items-center (flex-direction: row) и justify-content-center (flex -direction: column) может использоваться в родительском элементе flexbox (row или d-flex).

Примеры центрирования в Bootstrap 5


Загрузочный файл 4.3+ (Обновление 2019)

Для дополнительных CSS нет необходимости . То, что уже включено в Bootstrap, будет работать. Убедитесь, что контейнер (контейнеры) формы составляет , полную высоту . Bootstrap 4 теперь имеет класс h-100 для высоты 100% …

Вертикальный центр:

  
<форма>

https: // codeply.com / go / raCutAGHre

высота контейнера с предметом (ами) по центру должна быть 100% (или любая другая желаемая высота относительно центрируемого элемента)

Примечание. При использовании высоты : 100% ( процентной высоты ) для любого элемента, элемент занимает высоту своего контейнера . В современных браузерах блоки vh высота: 100vh; можно использовать вместо % , чтобы получить желаемую высоту.

Таким образом, вы можете установить html, body {height: 100%} или использовать новый класс min-vh-100 для контейнера вместо h-100 .


Горизонтальный центр:

  • текстовый центр по центру дисплей: встроенные элементы и содержимое столбца
  • mx-auto для центрирования внутренних гибких элементов
  • offset- * или mx-auto можно использовать для центральных колонн ( .col- )
  • justify-content-center центральные столбцы ( col- * ) внутри строки

Вертикальное выравнивание по центру в Bootstrap
Bootstrap 4, полноэкранная центрированная форма
Bootstrap 4, центральная группа ввода
Bootstrap 4, горизонтальный + вертикальный центральный полноэкранный режим

css — Центр вертикального выравнивания в Bootstrap

Важно! Вертикальный центр относительно высоты родительского

Если родительский элемент, который вы пытаетесь центрировать, не определен высота , нет решений для вертикального центрирования будут работать!

Теперь о центрировании по вертикали. ..

Bootstrap 5 Beta (обновлено в 2021 г.)

Bootstrap 5 по-прежнему основан на Flexbox, поэтому вертикальное центрирование работает так же, как Bootstrap 4. Например, align-items-center и justify-content-center могут использоваться для родительского элемента flexbox ( row или d-flex ). https://codeply.com/p/0VM5MJ7Had

Бутстрап 4

Вы можете использовать новые утилиты flexbox и size, чтобы сделать контейнер полноразмерным и отображать : flex .Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (т.е. html, body) должна составлять 100% ).

Вариант 1 самоцентрирующееся выравнивание на дочернем элементе flexbox

  
Я вертикально по центру

Вариант 2 align-items-center на родительском элементе flexbox ( . row display: flex; flex-direction: row )

  
Я вертикально по центру

https: // codeply.com / go / BumdFnmLuk

Вариант 3 justify-content-center на родительском элементе flexbox ( .card display: flex; flex-direction: column )

  
... содержимое карты ...


Подробнее о Bootstrap 4 Вертикальное центрирование

Теперь, когда Bootstrap 4 предлагает flexbox и другие утилиты, существует множество подходов к вертикальной выравнивание.http://www.codeply.com/go/WG15ZWC4lf

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

Другой способ центрировать по вертикали — использовать my-auto . Это центрирует элемент внутри контейнера. Например, h-100 делает строку полной высоты, а my-auto будет вертикально центрировать столбец col-sm-12 .

  
Карточка

Вертикальный центр с автоматическими полями Демо

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

  верхний край: авто;
маржа снизу: авто;
  

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

Начиная с Bootstrap 4 .строка теперь display: flex вы можете просто использовать align-self-center в любом столбце, чтобы центрировать его по вертикали …

  
Центр
Выше

или используйте align-items-center на всем .ряд по центру по вертикали выровнять все столбцов * в ряду …

  
Центр
Выше

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

См. Этот вопрос / ответ для центрирования, но сохраняйте одинаковую высоту


3 — Вертикальный центр с использованием средств отображения:

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

  
Я по центру вертикально

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

Другие примеры
Вертикальное центральное изображение в


Вертикальное центральное .row in .container
Вертикальное центральное и нижнее в

Вертикальное центральное дочернее изображение внутри родительского элемента
Вертикальное центральное полноэкранное jumbotron


Важно! Я упоминал рост?

Помните, что вертикальное центрирование выполняется относительно высоты родительского элемента .Если вы хотите центрировать всю страницу, в большинстве случаев это должен быть ваш CSS …

  body, html {
  высота: 100%;
}
  

Или используйте min-height: 100vh ( min-vh-100 в Bootstrap 4.1+) в родительском / контейнере. Если вы хотите центрировать дочерний элемент внутри родительского. Родитель должен иметь заданную высоту .

См. Также:
Вертикальное выравнивание в bootstrap 4
Bootstrap 4 Center Vertical and Horizontal Alignment

Bootstrap 4 Flex


Бутстрап 4 Flex

Используйте классы гибкости для управления компоновкой компонентов Bootstrap 4.


Flexbox

Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что Bootstrap 4 теперь использует flexbox вместо float для обработки макета.

Модуль Flexible Box Layout упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования. Если вы новичок в Flex, вы можете прочитать об этом в нашем руководстве по CSS Flexbox.

Примечание. Flexbox не поддерживается в IE9 и более ранних версиях.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации. Однако в Это.

Чтобы создать контейнер flexbox и преобразовать прямые дочерние элементы в гибкие элементы, используйте класс d-flex :

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример


Элемент Flex 1

Flex элемент 2

Элемент Flex 3


Попробуй сам »

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример


Элемент Flex 1

Flex элемент 2

Элемент Flex 3


Попробуй сам »

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

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

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример


Flex элемент 1
Flex элемент 2
Элемент Flex 3


Flex элемент 1

Элемент Flex 2

Элемент Flex 3


Попробуй сам »

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

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример


Flex элемент 1
Flex элемент 2
Элемент Flex 3


Flex элемент 1

Элемент Flex 2

Элемент Flex 3


Попробуй сам »

Обосновать содержание

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример






Попробуй сам »

Заполнение / равная ширина

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример


Flex элемент 1

Элемент Flex 2

Элемент Flex 3


Попробуй сам »

Рост

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример


Flex элемент 1

Элемент Flex 2

Элемент Flex 3


Попробуй сам »

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


Заказать

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример


Flex элемент 1

Элемент Flex 2

Элемент Flex 3


Попробуй сам »

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

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример


Flex элемент 1
Flex элемент 2
Элемент Flex 3


Элемент Flex 1

Flex элемент 2

Элемент Flex 3


Попробуй сам »

Обертка

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

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

гибкая пленка Flex-Wrap-Обратный Flex-Nowrap

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 4

Гибкий элемент 5

Гибкий элемент 6

Гибкий элемент 7

Гибкий элемент 8

Гибкий элемент 9

Гибкий элемент 10

Элемент гибкости 11

Гибкий элемент 12

Гибкий элемент 13

Гибкий элемент 14

Гибкий элемент 15

Элемент гибкости 16

Гибкий элемент 17

Гибкий элемент 18

Гибкий элемент 19

Гибкий элемент 20

Гибкий элемент 21

Гибкий элемент 22

Гибкий элемент 23

Гибкий элемент 24

Гибкий элемент 25

Пример

..

..

..

Попробуй сам »

Выровнять содержимое

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

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

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

выровнять контент-начало выровнять-контент-конец выровнять контент-центр выровнять контент вокруг выровнять контент-стрейч

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 4

Гибкий элемент 5

Гибкий элемент 6

Гибкий элемент 7

Гибкий элемент 8

Гибкий элемент 9

Гибкий элемент 10

Элемент гибкости 11

Гибкий элемент 12

Гибкий элемент 13

Гибкий элемент 14

Гибкий элемент 15

Элемент гибкости 16

Гибкий элемент 17

Гибкий элемент 18

Гибкий элемент 19

Гибкий элемент 20

Гибкий элемент 21

Гибкий элемент 22

Гибкий элемент 23

Гибкий элемент 24

Гибкий элемент 25

Пример

..

..

..

..

..

Попробуй сам »

Выровнять элементы

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

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

выровнять элементы-начало выровнять элементы-конец выровнять элементы-центр выровнять элементы базовой линии выровнять элементы-растягивать

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

..

..

..

..

..

Попробуй сам »

Самовыравнивание

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

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

выровнять самозапуск выровнять-само-конец выровнять самоцентр выровнять себя по базовой линии выровнять-саморастягиваться

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример


Элемент Flex 1

Элемент Flex 2

Элемент Flex 3


Попробуй сам »

Адаптивные классы гибкости

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

Символ * можно заменить на sm, md, lg или xl, которые обозначают малый, средний, большой или xlarge.

Класс Описание Пример
Гибкий контейнер
.d - * - гибкий Создает контейнер flexbox для разных экранов Попытайся
.d - * - inline-flex Создает встроенный контейнер Flexbox для разных экранов Попытайся
Направление
.flex - * - ряд Отображение гибких элементов по горизонтали на разных экранах Попытайся
.flex - * - ряд-реверс Отображение гибких элементов по горизонтали и с выравниванием по правому краю на разных экранах Попытайся
.гибкий - * - столбец Вертикальное отображение гибких элементов на разных экранах Попытайся
.flex - * - обратная колонка Отображать гибкие элементы вертикально в обратном порядке на разных экранах Попытайся
Обоснованное содержание
.justify-content - * - начало Отображение гибких элементов с самого начала (по левому краю) на разных экранах Попытайся
.justify-content - * - конец Отображение гибких элементов в конце (с выравниванием по правому краю) на разных экранах Попытайся
.justify-content - * - центр Отображение гибких элементов в центре гибкого контейнера на разных экранах Попытайся
.justify-content - * - между Отображение гибких элементов «между» на разных экранах Попытайся
.justify-content - * - около Отображение гибких элементов «вокруг» на разных экранах Попытайся
Заполнение / равная ширина
.гибкий - * - заполнить Принудительное использование гибких элементов одинаковой ширины на разных экранах Попытайся
Рост
.flex - * - Grow-0 Не заставляйте предметы расти на разных экранах
.flex - * - рост-1 Заставляйте предметы расти на разных экранах
Усадочная
.гибкий - * - термоусадочный-0 Не усаживайте предметы на разных экранах
.flex - * - термоусадочная-1 Уменьшение размеров элементов на разных экранах
Заказать
. Заказ - * - 0-12 Измените порядок с 0 на 12 на маленьких экранах Попытайся
Обертка
.гибкий - * - nowrap Не переносить элементы на разные экраны Попытайся
.flex - * - пленка Перенос элементов на разные экраны Попытайся
.flex - * - обратная пленка Обратная упаковка товаров на разных экранах Попытайся
Выровнять содержимое
.align-content - * - начало Выровняйте собранные элементы с самого начала на разных экранах Попытайся
.align-content - * - конец Выровняйте собранные элементы в конце на разных экранах Попытайся
.align-content - * - центр Выровняйте собранные предметы по центру на разных экранах Попытайся
.align-content - * - около Выровняйте собранные предметы «по кругу» на разных экранах Попытайся
.align-content - * - stretch Растягивание собранных предметов на разных экранах Попытайся
Выровнять элементы
.align-items - * - начало Выровнять отдельные ряды элементов с самого начала на разных экранах Попытайся
.align-items - * - конец Выровняйте отдельные ряды элементов в конце на разных экранах Попытайся
.align-items - * - центр Выровняйте отдельные ряды элементов по центру на разных экранах Попытайся
.align-items - * - базовая линия Выровнять отдельные ряды элементов по базовой линии на разных экранах Попытайся
.align-items - * - протянуть Растянуть отдельные ряды элементов на разных экранах Попытайся
Самовыравнивание
.align-self - * - начало Выровняйте гибкий элемент с самого начала на разных экранах Попытайся
.align-self - * - конец Выровняйте гибкий элемент в конце на разных экранах Попытайся
.align-self - * - центр Выровняйте гибкий элемент по центру на разных экранах Попытайся
.align-self - * - базовый уровень Выровняйте гибкий элемент по базовой линии на разных экранах Попытайся
.align-self - * - растянуть Растянуть гибкий элемент на разных экранах Попытайся


Bootstrap 4 по центру (выравнивание по горизонтали)

Компиляция и настройка

Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только эти компоненты и функции, которые вам нужны.

Если вам нужна дополнительная помощь в компиляции вашего пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке.

Руководство по компиляции и настройке

Карта зависимостей файлов SCSS в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'

    'none' означает 'этот компонент не требует ничего, кроме файлов ядра'

    Файл, завернутый в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.

    Все компоненты PRO требуют 'pro / _variables.scss 'файл

    scss /
    |
    | - ядро ​​/
    | |
    | | - бутстрап /
    | | | - _functions.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _buttons.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss нет (PRO :)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
    | | - _depreciated.scss
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _устарело.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

    

Карта зависимостей модулей JavaScript в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все файлы требуют jQuery и bootstrap.js

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── chip.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── карты.js
    │ ├── character-counter.js
    │ ├── chip.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── extended-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
    

8 Примеры выравнивания текста в Bootstrap 4: по центру, справа и др.

Bootstrap 4 имеет встроенные классы для работы с выравниванием текста как по центру, справа и слева, а также с весом текста (полужирным шрифтом), переносом, переполнением, преобразованием и курсивом.

В этом уроке я покажу вам живые демонстрации выравнивания текста по центру, справа и слева.Я также покажу вам использование вспомогательных классов float вместе с классами выравнивания текста для изображений.

Пример текста центра начальной загрузки

Чтобы выровнять текст по центру, используйте класс .text-center . В следующем примере этот класс применяется к абзацу и заголовкам от h2 до h6, чтобы текст был выровнен по центру:

См. Онлайн-демонстрацию и код

В разметке:

Класс text-center для выравнивания текста по центру в абзаце!

Центрировать текст в заголовке 1!

Центрировать текст в заголовке 2 !

Выровнять текст по центру в заголовке 3!

Выровнять текст по центру в заголовке 4!

Выровнять текст по центру заголовка 5!

Центрировать текст в заголовке 6!

Пример выравнивания текста по правому краю

Для выравнивания текста по правому краю используйте .text-right класс в элементе. Как и в приведенном выше примере, я применил класс .text-right в абзаце и заголовки h2 к h6 для демонстрации:

См. Онлайн-демонстрацию и код

Пример кода для выравнивания по правому краю

Выровнять по правому краю по классу текста по правому краю в абзаце

Выровнять по правому краю по h2!

Выровнять по правому краю по h3!

Выровнять по правому краю в h2!

Выровнять по правому краю по h2!

Выровнять по правому краю по h2!

Выровнять по правому краю в h2!

Пример использования класса text-left

Аналогичным образом вы можете использовать .text-left класс для выравнивания текста по левому краю. Это поведение по умолчанию, применяемое в тексте. Чтобы показать разницу, я использовал абзацы и заголовки с классом .text-left и без него.

Посмотрите на вывод и код, посетив демонстрационную страницу:

См. Онлайн-демонстрацию и код

Разметка для использования класса text-left:

Выровнять по левому краю по классу текста по левому краю в абзаце

Выровнять по левому краю по h2!

Выровнять по левому краю по h3!

Выровнять по левому краю в h2!

Выровнять по левому краю по h2!

Выровнять по левому краю по h2!

Выровнять по левому краю в h2!

Выравнивание текста с окнами просмотра

Если вы хотите, чтобы текст был выровнен по центру или по правому краю для больших или маленьких устройств, особенно в соответствии с окнами просмотра, используйте свойство text-align, как описано ниже с примерами.

Для выравнивания текста по центру только на больших устройствах используйте класс text-lg-center . Чтобы проверить это, скопируйте код со страницы примера в вашем редакторе и запустите код. Теперь посмотрите на размер экрана > = 1200px и в маленьком размере, чтобы увидеть, как он меняет свое выравнивание:

См. Онлайн-демонстрацию и код

Код:

Демонстрация выравнивания текста в Bootstrap 4

Выровнен по центру в большом окне просмотра и слева в маленьких окнах просмотра

h2: по центру на большом экране и слева в среднем / меньшем

h5: по центру на большом экране и по центру в среднем / меньшем

h5: по центру на большом экране и по центру в среднем / меньшем

h6: по центру на большом экране и по центру в среднем / меньшем

Выровнять центр только в средних и больших окнах просмотра

Для выравнивания текста по центру только в средних и больших окнах просмотра и выравнивания по левому краю в маленьких окнах просмотра используйте .text-md-center в таких элементах, как

,

,

и т. д.

Посмотрите на использование и попробуйте с различными размерами экрана:

См. Онлайн-демонстрацию и код

Код:

Демонстрация класса text-md-center

Выровнен по центру в средних / больших окнах просмотра и слева в маленьких окнах просмотра

h2: по центру на среднем / большом экране и слева на меньшем

h5: по центру на среднем / большом экране и по центру на меньшем

h5: по центру на среднем / большом экране и по центру на меньшем

h6: по центру на среднем / большом экране и по центру на меньшем

Демонстрация класса text-sm-center

Для выравнивания текста по центру на всех устройствах / вьюпортах, кроме очень малых (менее 576 пикселей), используйте класс text-sm-center .Демо-код показан ниже:

См. Онлайн-демонстрацию и код

Код, который стоит попробовать:

Демонстрация класса text-sm-center

Выровнять центр в малых / средних / больших окнах просмотра, кроме очень маленьких

h2: по центру маленький / средний / большой, кроме очень маленького

h5: по центру малый / средний / большой, кроме очень маленького

h5: по центру маленький / средний / большой, кроме очень маленького

h6: по центру маленький / средний / большой, кроме очень маленького

Использование классов текстовой сетки для выравнивания по правому и левому краю

Точно так же Bootstrap 4 имеет встроенные классы для выравнивания по правому или левому краю (конкретно) для различных экранов / видовых экранов.Доступны следующие классы:

Для выравнивания по правому краю:

  • текст-см-справа
  • текст-MD-справа
  • текст-LG-справа

Для выравнивания по левому краю:

  • текст-см-слева
  • текст-MD-слева
  • текст-LG-левый

Централизованное выравнивание изображения по классу text-center

Вы можете использовать не только .text-center или другие классы текста для выравнивания текста, но и изображений.В следующем примере два изображения выравниваются по правому краю и по центру с использованием классов выравнивания текста Bootstrap 4 следующим образом:

См. Онлайн-демонстрацию и код

Разметка для изображений с выравниванием по правому краю и по центру по классам текста:

Выровненное по центру изображение

 Изображение с выравниванием по правому краю

Выравнивание изображений по классам плавания

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

См. Онлайн-демонстрацию и код

Пример кода:

Пример выравнивания изображений

 Выровнено по левому краю

 Выровнено по правому краю


Посмотрите результат и получите полный код с демонстрационной страницы.

Bootstrap 4: Выровнять Div или Form по вертикали и горизонтали

Центрирование HTML-элемента по горизонтали с помощью CSS, будь то «div» или «форма», всегда было легко для веб-разработчиков, по крайней мере, в течение последних 10 лет или около того.

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

Что ж, это было очень сложной задачей в течение многих лет (по крайней мере, для меня), и некоторые разработчики также использовали JavaScript в некоторых ситуациях для получения желаемого результата.

Это продолжало быть проблемой, по крайней мере для меня, до появления макета CSS flexbox и утилит flexbox, предлагаемых в Bootstrap 4.

И именно об этом мы поговорим в сегодняшнем руководстве.

Мы увидим 3 примера , где мы берем «div» и «форму». и выровняем их по центру, по вертикали и горизонтали , используя Bootstrap 4 (текущая версия 4.3.1).

По окончании обучения вы можете скачать все файлы в виде удобных шаблонов.

Начнем!

Пример 1. Выровнять «Div» в центре другого «Div», фиксированная высота, не полный экран

В этом первом примере мы выровняем элемент «div» внутри его родительского «div», который имеет фиксированную высоту.Это окончательный результат :

Мы добьемся этого с помощью некоторого кода HTML и CSS и некоторых удобных классов, предлагаемых Bootstrap 4. Давайте сначала посмотрим код, а затем объясним его.

HTML-код (файл index.html, я не показываю весь код страницы):

Bootstrap 4: выровнять по центру

Учебное пособие о том, как выровнять элемент «div» по вертикали и горизонтали в Bootstrap 4.

Это наш "div" с выравниванием по центру.

Код CSS (файл «style.css», папка «assets / css /», я не показываю весь код CSS страницы):

.div-wrapper {
    высота: 200 пикселей;
    маржа сверху: 40 пикселей;
    граница: 2px пунктирная #ddd;
    радиус границы: 8 пикселей;
}

.div-to-align {
    ширина: 75%;
    отступ: 40 пикселей 20 пикселей;

    / * .... * /
}
 

Итак, в нескольких словах, мы хотим выровнять div с классом «div-to-align» в центре его родительского div, который имеет класс «div-wrapper» .

Родительский div имеет фиксированную высоту 200 пикселей (устанавливается с помощью CSS).

Чтобы выровнять наш div, мы выполним 3 простых шага :

  • 1. Сначала мы добавляем класс «d-flex» к нашему «div-wrapper» . Делая это, мы включаем гибкое поведение и создаем контейнер flexbox (наш класс «div-wrapper»), а также преобразуем его прямые дочерние элементы в гибкие элементы, как описано в документации Bootstrap здесь.
  • 2. Затем мы добавляем класс «justify-content-center» к нашему «div-wrapper», чтобы выровнять по горизонтали, по центру, его дочерний div (с классом «div-to-align»), тот что мы хотим выровнять.Документация здесь.
  • 3. Наконец, самая важная часть — вертикальное выравнивание. Мы делаем это с помощью , добавляя класс «align-items-center» к нашему «div-wrapper», чтобы выровнять его дочерний div по вертикали по центру. Документация здесь.

Вот и все для этого примера. Вы можете увидеть LIVE PREVIEW здесь .

Пример 2: Выровнять «форму» по центру страницы, полноэкранный режим

Во втором примере мы узнаем, как выровнять форму, чтобы она всегда оставалась в центре страницы, независимо от устройства или размера экрана.

Это окончательный результат :

Для достижения этого результата нам нужны все родительских элементов нашей формы , теги «div-s», «body» и «html», чтобы имели высоту 100% .

Они должны занимать все вертикальное пространство страницы, чтобы форму можно было разместить в центре этого пространства.

Мы установили для этих элементов высоту 100% с помощью класса Bootstrap «h-100» .

Мы добавляем этот класс в тег «html» :


 

И к тегу «body» :


 

Теперь давайте посмотрим на HTML-код формы и объясним его:

Bootstrap 4: выровнять по центру

Учебное пособие о том, как выровнять «форму» по вертикали и горизонтали в Bootstrap 4.

& копировать; Учебник Bootstrap 4 «Выровнять по центру» от AZMIND .

Как видите, мы также добавляем класс «h-100» к первым двум родительским элементам div формы, «контейнер» и «строка» .

Здесь следует отметить одну важную вещь: мы не использовали класс «d-flex» , который мы использовали в первом примере.

Это связано с тем, что «строк» ​​уже являются контейнерами flexbox в Bootstrap 4 .

Наконец, мы выравниваем форму по горизонтали и вертикали с теми же классами из предыдущего примера, «justify-content-center» и «align-items-center» .

Что касается кода CSS, я не показываю его здесь, потому что я использовал его только для стилизации формы, а не для ее выравнивания. Вы можете найти его в файле «style.css» (папка «assets / css /»).

И мы закончили! LIVE PREVIEW здесь .

Пример 3. Выровняйте «форму» по центру страницы, в полноэкранном режиме, на фоне изображения

Последний пример такой же, как и предыдущий, я просто добавил полноэкранный фон изображения с некоторым кодом JavaScript (который вы можете увидеть при загрузке шаблона) и стилизовал форму по-другому.

Код для его выравнивания тоже такой же, поэтому я его больше не показываю.

Мне просто показалось, что он выглядит лучше и более завершенным, (почти) готовым для включения в настоящий проект. Вот почему я добавил его, назовем это «бонусным» примером.

Вот окончательный результат :

А вот и LIVE PREVIEW .

Demo, загрузка и лицензия

ПРОСМОТРЕТЬ ДЕМО (все 3 примера)

СКАЧАТЬ: Bootstrap 4 Align Center (1476 загрузок)

ЛИЦЕНЗИЯ:

Вы можете использовать эти шаблоны в личных и коммерческих проектах, но не можете продавать или распространять их напрямую «как есть».Если вы планируете использовать их, мы будем очень признательны за ссылку на эту страницу или любую форму распространения информации.

Заключение

Bootstrap предлагает несколько удобных и интуитивно понятных утилит flexbox для управления макетами наших страниц, как мы видели в этом руководстве.

Мы использовали всего 3 или 4 класса, чтобы быстро и легко выровнять наши элементы. Это означает значительную экономию времени в нашей повседневной работе по разработке.

Что вы думаете об этом руководстве? У вас есть вопросы или предложения? Позвольте мне знать в комментариях ниже.

Оставайтесь в курсе

Подпишитесь на информационный бюллетень Azmind, и я сообщу вам, как только я выпущу новую тему WordPress, шаблон Bootstrap, учебное пособие или другую бесплатную услугу:

Подписаться

Чтобы узнать, как мы используем ваши данные, когда вы подписываетесь на нашу рассылку, прочтите нашу Политику конфиденциальности здесь.

Вертикальное центрирование в Bootstrap 4

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

В этой статье мы увидим различные способы, которые мы можем использовать для центрирования элемента по вертикали в Bootstrap 4.

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

Для вертикального выравнивания элементов Bootstrap 4 предоставляет различные методы, такие как:

Если вы хотите центрировать элемент по вертикали, вы можете подумать об использовании утилит Vertical Align, предоставляемых Bootstrap, которые будут работать только со встроенными элементами, но что если вы хотите вертикально центрировать элемент внутри его родительского контейнера?

Предположим, у нас есть два элемента

, стилизованных под Bootstrap .row и .col-md-12 , и вы хотите центрировать столбец внутри строки по вертикали.

  <тело>
Это должно быть отцентрировано по вертикали.

Вертикальное центрирование элементов с автоматическими полями

Вы можете центрировать элемент #col внутри его родительского элемента, используя автоматические поля, но сначала вам нужно сделать родительский элемент на всю высоту.

Добавьте .h-100 класс к разделению строки, который заставит его взять всю доступную высоту в своем родителе. Затем вы можете центрировать элемент с помощью служебного класса .my-auto :

  
Это должно быть отцентрировано по вертикали.

Использование my-auto служебный класс используется для установки автоматических полей по оси Y, my обозначает поле по оси Y :

  margin-top: auto;
маржа снизу: авто;
  

Вертикальное центрирование элементов с помощью Flexbox

Bootstrap 4 использует Flexbox.Таким образом, теперь вы можете использовать утилиты Flexbox для простого достижения различных техник, например, вертикального центра.

Вам просто нужно использовать класс .align-self-center в вашем элементе для его центрирования при условии, что его родительский элемент имеет свойство display: flex :

  
Это должно быть отцентрировано по вертикали.