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