Растяжимость элементов (flex-grow)link

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

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

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

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

Синтаксисlink

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

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

  • Модификатор (обязательный параметр):

    • grow — разрешает элементу флексбокса растягиваться, заполняя всё доступное пространство.
    • grow-none — запрещает элементу флексбокса растягиваться.

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

<!-- Пример с grow: центральный элемент будет растягиваться, заполняя доступное пространство -->
<div class="flex">
  <div class="bg-neutral-10 px-2">Левый</div>
  <div class="grow bg-neutral-20 px-2 text-center">Центральный (растяжимый)</div>
  <div class="bg-neutral-30 px-2">Правый</div>
</div>

<!-- Пример с grow-none: центральный элемент не будет растягиваться, несмотря на доступное пространство -->
<div class="flex">
  <div class="grow bg-neutral-10 px-2">Левый (растяжимый)</div>
  <div class="grow-none bg-neutral-20 px-2 text-center">Центральный (не растяжимый)</div>
  <div class="grow bg-neutral-30 px-2">Правый (растяжимый)</div>
</div>

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

Для изменения растяжимости элемента флексбокса при достижении определённой контрольной точки экрана, просто добавьте её к модификатору:

<div class="md:grow">
  <!-- Начиная с md элемент будет растягиваться, заполняя доступное пространство -->
</div>