Растяжимость элементов

flex-grow
sm
md
lg
xl

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

Классы

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

Описание

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

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

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

grow

С помощью модификатора grow можно разрешить flex элементу растягиваться заполняя все свободное пространство.

<div class="flex ...">
  <div class="...">
    <!-- This item will not grow -->
  </div>
  <div class="grow ...">
    <!-- This item will grow -->
  </div>
  <div class="...">
    <!-- This item will not grow -->
  </div>
</div>

grow-none

С помощью модификатора grow-none можно запретить flex элементу растягиваться.

<div class="flex ...">
  <div class="grow ...">
    <!-- This item will grow -->
  </div>
  <div class="grow-none ...">
    <!-- This item will not grow -->
  </div>
  <div class="grow ...">
    <!-- This item will grow -->
  </div>
</div>

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

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

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

<div class="md:grow"></div>

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

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