Максимальная ширина (max-width)link

https://dev.ru.simai.io/ru/ui/utility/size/max-width.php

В SIMAI Framework модификаторы max-width ограничивают максимальную ширину элемента, чтобы избежать растягивания контента и сохранить удобочитаемость.

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

Синтаксисlink

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

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

• Модификатор (обязательный параметр): max-w-full, max-w-screen, max-w-min, max-w-max, max-w-fit, max-w-prose, max-w-none, max-w-0, max-w-(sm|md|lg|xl), max-w-a0 ... max-w-i9.

Примерыlink

Фиксированная максимальная ширина:

<div class="flex">
	<div class="max-w-e4 grow"></div>
	<div class="max-w-e8 grow"></div>
	<div class="max-w-f2 grow"></div>
	<div class="max-w-f6 grow"></div>
</div>

На всю ширину (max-w-full):link

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

Минимальная ширина контента (max-w-min):link

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

Максимальная ширина контента (max-w-max):link

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

Ширина экрана (max-w-screen):link

<div class="w-full">
	<div class="max-w-screen"></div>
</div>

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

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

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

В этом примере максимальная ширина будет 100% (max-w-full) только при размерах экрана md и больше.

Playgroundlink