Одновременное выравнивание по двум осям

flex-align
sm
md
lg
xl

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

Классы

Класс Значение
start-start justify-content: flex-start;
align-items: flex-start;
start-center justify-content: flex-start;
align-items: center;
start-end justify-content: flex-start;
align-items: flex-end;
center-start justify-content: center;
align-items: flex-start;
center-center justify-content: center;
align-items: center;
center-end justify-content: center;
align-items: flex-end;
end-start justify-content: flex-end;
align-items: flex-start;
end-center justify-content: flex-end;
align-items: center;
end-end justify-content: flex-end;
align-items: flex-end;

Описание

Адаптивный модификатор. Заменяет собой сочетание двух стилей justify-content и align-items. Задает способ выравнивания содержимого флексбокса одновременно по основной и поперечной оси в зависимости от размера области просмотра.

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

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

start-start

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

1
<div class="flex start-start">
    <div>1</div>
</div>

start-center

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

1
<div class="flex start-center">
    <div>1</div>
</div>

start-end

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

1
<div class="flex start-end">
    <div>1</div>
</div>

center-start

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

1
<div class="flex center-start">
    <div>1</div>
</div>

center-center

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

1
<div class="flex center-center">
    <div>1</div>
</div>

center-end

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

1
<div class="flex center-end">
    <div>1</div>
</div>

end-start

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

1
<div class="flex end-start">
    <div>1</div>
</div>

end-center

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

1
<div class="flex end-center">
    <div>1</div>
</div>

end-end

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

1
<div class="flex end-end">
    <div>1</div>
</div>

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

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

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

<div class="md:center-center"></div>

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

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