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

align-content
sm
md
lg
xl

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

Классы

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

Описание

Адаптивный модификатор. Задает выравнивание содержимого сетки или флексбокса относительно поперечной оси в зависимости от размера области просмотра.

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

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

content-cross-start

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

1
2
3
4
5
<div class="flex content-cross-start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

content-cross-end

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

1
2
3
4
5
<div class="flex content-cross-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

content-cross-center

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

1
2
3
4
5
<div class="flex content-cross-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

content-cross-between

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

1
2
3
4
5
<div class="flex content-cross-between">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

content-cross-around

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

1
2
3
4
5
<div class="flex content-cross-around">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

content-cross-evenly

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

1
2
3
4
5
<div class="flex content-cross-evenly">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

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

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

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

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

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

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