Bootstrap 5 Flex Auto поля

В Bootstrap 5 появилось свойство Flex, которое позволяет разработчикам легко изменять и упорядочивать flex-элементы. Всеми макетами контейнеров можно управлять с помощью недавно представленного Flex. У утилиты flex много свойств, автомаржа — одно из них.

Используемые поля Flex Auto Классы:

• .ms-auto: начало поля обозначается «мс». Мы можем легко добавить автоматические поля для flex-элементов с помощью . ms-auto , который будет сдвигать элементы вправо. Класс .ms-auto в основном является левым полем для auto.
• .me-auto: «я» представляет собой конец поля. Этот тип автоматического поля, me-auto, используется для смещения элементов влево. Класс .me-auto устанавливает значение margin-right равным auto.

Синтаксис:

<div class="d-flex">
     <div class="*-auto"> Content... </div>
     ...
</div>

Пример 1. В этом примере мы будем использовать классы .d-flex и .ms-auto для размещения flex-элементов.

Выход:

Пример 2. В этом примере мы будем использовать классы .d-flex и .me-auto для размещения flex-элементов.

Выход:

Auto Margins with align-items: Auto Margin также можно использовать с Align Items для вертикального перемещения элементов вверх или вниз. . Класс mb-auto указывает, что для поля margin-bottom установлено значение auto, а класс .mt-auto указывает на маржу-авто-верх.

Пример: в этом примере мы будем использовать классы .d-flex, .align-items-start и .align-items-end для размещения flex-элементов.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/utilities/flex/#auto-margins