Гибкость элементов

flex
sm
md
lg
xl

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

Классы

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

Описание

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

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

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

flex-1

С помощью модификатора flex-1 можно разрешить flex элементу растгиваться и сжиматься, игнорируя его исходный размер.

Default

Short
Medium length
Larger amount of content

flex-1

Short
Medium length
Larger amount of content
<div class="flex">
    <div class="flex-1">...</div>
    <div class="flex-1">...</div>
    <div class="flex-1">...</div>
</div>

flex-auto

С помощью модификатора flex-auto можно разрешить flex элементу растгиваться и сжиматься, учитывая его исходный размер.

Default

Short
Medium length
Larger amount of content

flex-auto

Short
Medium length
Larger amount of content
<div class="flex">
    <div class="flex-auto">...</div>
    <div class="flex-auto">...</div>
    <div class="flex-auto">...</div>
</div>

flex-initial

С помощью модификатора flex-initial можно разрешить flex элементу сжиматься учитывая его исходный размер, но запрещает растягиваться.

Default

Short
Medium length
Larger amount of content

flex-initial

Short
Medium length
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="flex">
    <div class="flex-initial">...</div>
    <div class="flex-initial">...</div>
    <div class="flex-initial">...</div>
</div>

flex-none

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

Item can grow or shrink if needed
flex-none
Item can not grow or shrink
Item can grow or shrink if needed
<div class="flex">
    <div>...</div>
    <div class="flex-none">...</div>
    <div>...</div>
</div>

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

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

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

<div class="md:flex-none"></div>

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

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