Размещение содержимого

place-content
sm
md
lg
xl

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

Классы

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

Описание

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

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

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

content-center

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

1
2
3
4
<div class="grid grid-col-3 content-center">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

content-start

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

1
2
3
4
<div class="grid grid-col-3 content-start">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

content-end

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

1
2
3
4
<div class="grid grid-col-3 content-end">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

content-between

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

1
2
3
4
<div class="grid grid-col-3 content-between">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

content-around

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

1
2
3
4
<div class="grid grid-col-3 content-around">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

content-evenly

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

1
2
3
4
<div class="grid grid-col-3 content-evenly">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

content-stretch

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

1
2
3
4
<div class="grid grid-col-3 content-stretch">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

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

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

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

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

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

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