Размещение отдельного элемента

place-self
sm
md
lg
xl

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

Классы

Класс Значение
self-auto place-self: auto;
self-start place-self: start;
self-end place-self: end;
self-text-center place-self: text-center;
self-stretch place-self: stretch;

Описание

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

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

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

self-auto

С помощью модификатора self-auto можно разместить элементы на основе значения свойства place-items.

1
2
3
4
5
6
<div class="grid grid-col-3 self-auto">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

self-start

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

1
2
3
4
5
6
<div class="grid grid-col-3 self-start">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

self-end

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

1
2
3
4
5
6
<div class="grid grid-col-3 self-end">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

self-center

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

1
2
3
4
5
6
<div class="grid grid-col-3 self-center">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

self-stretch

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

1
2
3
4
5
6
<div class="grid grid-col-3 self-stretch">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

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

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

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

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

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

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