Минимальная ширина

min-width
sm
md
lg
xl

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

Классы

Класс Значение
min-w-min min-width: min-content;
min-w-max min-width: max-content;
min-w-fit min-width: fit-content;
min-w-full min-width: 100%;
min-w-0 min-width: 0;

Описание

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

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • min-w-full - 100% ширины;
    • min-w-min - внутренняя минимальная ширина;
    • min-w-max - внутренняя максимальная предпочтительная ширина;
    • min-w-fit - определяет как min(max-content, max(min-content, fill-available));
    • min-w-0 - нулевая ширина.

На всю ширину

Модификатор min-w-full устанавливает минимальной ширину на всю ширину родительского элемента.

min-w-full
<div class="min-w-full"></div>

Минимальная ширина контента

Модификатор min-w-min устанавливает минимальную ширину равную длине самого длинного слова.

Lorem ipsum dolor sit amet, consectetur
<div class="w-0">
    <div class="min-w-min">Lorem ipsum dolor sit amet, consectetur</div>
</div>

Максимальная ширина контента

Модификатор min-w-max устанавливает минимальную ширину равную длине всего контента не учитывая ширину родительского элемента.

Lorem ipsum dolor sit amet, consectetur
<div class="w-0">
	<div class="min-w-max">Lorem ipsum dolor sit amet, consectetur</div>
</div>

По содержимому

Модификатор min-w-fit устанавливает минимальную ширину равную min(max-content, max(min-content, fill-available)).

Lorem ipsum dolor sit amet, consectetur
<div class="w-0">
	<div class="min-w-fit">Lorem ipsum dolor sit amet, consectetur</div>
</div>

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

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

Например, используйте модификатор md:min-w-full для установки минимальной ширины в 100% для экранов размером Medium и больше.

<div class="md:min-w-full"></div>

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

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