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

justify-content
sm
md
lg
xl

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

Классы

Класс Значение
content-main-start justify-content: flex-start;
content-main-end justify-content: flex-end;
content-main-center justify-content: text-center;
content-main-between justify-content: space-between;
content-main-around justify-content: space-around;
content-main-evenly justify-content: space-evenly;

Описание

Адаптивный модификатор. Задает направление размещения элементов сетки или флексбокса вдроль основной оси в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • content-main-start - элементы располагаются друг за другом и прижимаются к началу контейнера по основной оси, в зависимости от её направления;
    • content-main-end - элементы располагаются друг за другом и прижимаются к концу контейнера по основной оси, в зависимости от её направления;
    • content-main-center - элементы располагаются друг за другом в центре контейнера по основной оси;
    • content-main-between - элементы равномерно распределены относительно основной оси контейнера. Расстояния между каждой парой соседних элементов равны. Первый элемент прижат к началу контейнера по основной оси, а последний - к концу;
    • content-main-around - элементы равномерно распределены относительно основной оси контейнера. Расстояния между каждой парой соседних элементов равны. Пустые пространства перед первым элементом и после последнего элемента равны половине расстояния между парами соседних элементов;
    • content-main-evenly - элементы равномерно распределены относительно основной оси контейнера. Расстояния между каждой парой соседних элементов равны расстояниям от начала контейнера до первого элемента и от последнего элемента до конца контейнера.

content-main-start

С помощью модификатора content-main-start можно выравнить элементы флексбокса к старту по основной оси.

1
2
3
<div class="flex content-main-start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

content-main-end

С помощью модификатора content-main-end можно выравнить элементы флексбокса к финишу по основной оси.

1
2
3
<div class="flex content-main-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

content-main-center

С помощью модификатора content-main-center можно выравнить элементы флексбокса по центру.

1
2
3
<div class="flex content-main-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

content-main-between

С помощью модификатора content-main-between можно распределить элементы флексбокса, первый и последний прижаты к краю.

1
2
3
<div class="flex content-main-between">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

content-main-around

С помощью модификатора content-main-around можно распределить элементы флексбокса, растояние вокруг каждого элемнта равно, а растояние между крайними элементами и границей равно половине растояния между элементами.

1
2
3
<div class="flex content-main-around">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

content-main-evenly

С помощью модификатора content-main-evenly можно распределить элементы флексбокса, растояние вокруг каждого элемнта равно и растояние между крайними элементами и границей также равно расстоянию между элементами.

1
2
3
<div class="flex content-main-evenly">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Адаптивность

При выравнивания элементов флексбокса по основной оси для элементов флексбокса, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору выравнивания элементов флексбокса по основной оси.

Например, используйте модификатор md:content-main-start для выравнивания элементов флексбокса по стартовой стороне флексбокса для экранов размером Medium и больше.

<div class="md:content-main-start"></div>

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

Изменить статью