Сжимаемость

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

Классы

Описание

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

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

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

shrink

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

<div class="flex ...">
  <div class="grow ...">
    <!-- This item will grow or shrink as needed -->
  </div>
  <div class="shrink ...">
    <!-- This item will shrink -->
  </div>
  <div class="grow ...">
    <!-- This item will grow or shrink as needed -->
  </div>
</div>

shrink-none

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

<div class="flex ...">
  <div class="shrink ...">
    <!-- This item will grow or shrink as needed -->
  </div>
  <div class="shrink-none ...">
    <!-- This item will not shrink below its initial size-->
  </div>
  <div class="shrink ...">
    <!-- This item will grow or shrink as needed -->
  </div>
</div>

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

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

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

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

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

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