Гибкость элементов (flex)link

https://dev.ru.simai.io/ru/ui/utility/flex/flex.php

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

Таблица классовlink

Класс	Значение
.flex-1	flex: 1 1 0%;
.flex-auto	flex: 1 1 auto;
.flex-initial	flex: 0 1 auto;
.flex-none	flex: none;

Синтаксисlink

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

Контрольная точка (необязательный параметр):
Применяет модификатор начиная с определённого размера экрана (sm, md, lg, xl).
Если не указана, модификатор применяется для всех размеров.
Модификатор (обязательный параметр):
- flex-1 — элемент может сжиматься или растягиваться, полностью игнорируя свой исходный размер.
- flex-auto — элемент может сжиматься или растягиваться, учитывая его исходный размер.
- flex-initial — элемент может сжиматься, учитывая исходный размер, но не растягивается.
- flex-none — элемент не сжимается и не растягивается.

Примеры использованияlink

<!-- Пример с flex-1: все элементы равномерно распределят доступное пространство -->
<div class="flex">
    <div class="flex-1 bg-neutral-10">Короткий текст</div>
    <div class="flex-1 bg-neutral-20">Средний по длине текст</div>
    <div class="flex-1 bg-neutral-30">Длинный текст, способный занять больше места, если оно доступно</div>
</div>