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

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

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

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

Wrap

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

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

 
...

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

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

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

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

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

 
. ..

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент0019

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

 
...

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

Порядок

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

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

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

Третий гибкий элемент

 <дел>
  
Первый гибкий элемент
Второй гибкий элемент
Третий гибкий элемент

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

  • . заказ-0
  • .заказ-1
  • .заказ-2
  • .заказ-3
  • .заказ-4
  • .заказ-5
  • .заказ-см-0
  • .заказ-см-1
  • .заказ-см-2
  • .заказ-см-3
  • .заказ-см-4
  • .заказ-см-5
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .заказ-lg-0
  • .заказ-lg-1
  • .заказ-lg-2
  • .заказ-lg-3
  • .заказ-lg-4
  • .заказ-lg-5
  • .заказ-xl-0
  • .заказ-xl-1
  • .заказ-xl-2
  • . заказ-xl-3
  • .заказ-xl-4
  • .заказ-xl-5
  • .заказ-xxl-0
  • .заказ-xxl-1
  • .заказ-xxl-2
  • .заказ-xxl-3
  • .заказ-xxl-4
  • .заказ-xxl-5

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

  • .заказ-первый
  • .последний заказ
  • .заказ-см-первый
  • .заказ-см-последний
  • .order-md-first
  • .order-md-последний
  • .order-lg-first
  • .заказ-lg-последний
  • .заказ-xl-первый
  • . заказ-xl-последний
  • .заказ-xxl-первый
  • .заказ-xxl-последний

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

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

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

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

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

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

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

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

 
. ..

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент0019

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

 
...

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Элемент Flex

 
...

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

 
. ..

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

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

Flex Item

Flex Item

Flex Item

Flex Item

Flex Item

Elead Item

Elead Item

Flex Item

Eled

Elead

Elemp элемент

 
...

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex-элемент

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

Flex item

 
...

Адаптивные варианты также существуют для 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-центр
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-центр
  • .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-центр
  • .align-content-xl-вокруг
  • .align-content-xl-stretch
  • . align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-центр
  • .align-content-xxl- вокруг
  • .align-content-xxl-stretch

Медиа-объект

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

PlaceholderImage

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

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

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

PlaceholderImage

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *