Базисный размер (flex-basis)link

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

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

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

Класс	Значение
.basis-auto	flex-basis: auto;
.basis-full	flex-basis: 100%;
.basis-1/2	flex-basis: 50%;
.basis-1/3	flex-basis: 33.333333%;
.basis-2/3	flex-basis: 66.666667%;
.basis-1/4	flex-basis: 25%;
.basis-2/4	flex-basis: 50%;
.basis-3/4	flex-basis: 75%;
.basis-1/5	flex-basis: 20%;
.basis-2/5	flex-basis: 40%;
.basis-3/5	flex-basis: 60%;
.basis-4/5	flex-basis: 80%;
...	...
.basis-px	flex-basis: 1px;
.basis-0	flex-basis: 0;
.basis-1 ... .basis-100	flex-basis: {1..100}%

Синтаксисlink

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

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

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

  • basis-{0, px, auto, full, 1/2, 1/3, 2/3, ...} — устанавливает начальный размер флекс-элемента как долю ширины родительского элемента или заданный процент/значение.

  Широко используются относительные значения (например, basis-1/2 или basis-3/5) для построения адаптивных интерфейсов.

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

<div class="flex">
    <div class="basis-1/2"></div>
    <div class="basis-1/2"></div>
    <div class="basis-2/5"></div>
    <div class="basis-3/5"></div>
</div>

В данном примере первые два элемента займут по 50% доступной ширины, а следующие — 40% и 60% соответственно.

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

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

<div class="md:basis-1/2">
    <!-- Начиная с md элемент будет иметь начальный размер 50% -->
</div>