Center bootstrap: Grid system · Bootstrap

Leave a Comment / Разное / By /

Содержание

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

Пример

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

<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

Пример

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

<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

Пример

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

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

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

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

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

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

Example

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

Flex item 16

Flex item 17

Flex item 18

Flex item 19

Flex item 20

Flex item 21

Flex item 22

Flex item 23

Flex item 24

Flex item 25

Пример

<div>. .</div>

<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 (по умолчанию).

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

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>..</div>

<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 (по умолчанию).

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

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

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

html — Bootstrap получает div для выравнивания по центру

спросил

Изменено 3 года, 3 месяца назад

Просмотрено 178 тысяч раз

Я пытаюсь выровнять некоторые кнопки нижнего колонтитула по центру, но по какой-то причине это не работает.

 <дел>
  <дел>
    <дел>
      
 Здравствуйте
<дел>