Максимальная ширина
max-width
sm
md
lg
xl
В SIMAI Framework с помощью модификаторов можно задать максимальную ширину элемента.
Классы
| Класс | Значение |
|---|---|
max-w-full |
max-width: 100%;
|
max-w-screen |
max-width: 100vw;
|
max-w-content-min |
max-width: min-content;
|
max-w-content-max |
max-width: max-content;
|
max-w-fit |
max-width: fit-content;
|
max-w-prose |
max-width: 65ch;
|
max-w-none |
max-width: none;
|
max-w-0 |
max-width: 0;
|
max-w-sm |
max-width: 576px;
|
max-w-md |
max-width: 768px;
|
max-w-lg |
max-width: 992px;
|
max-w-xl |
max-width: 1200px;
|
max-w-a0 |
max-width: var(--sf-size--a-0);
|
max-w-a1 |
max-width: var(--sf-size--a-1);
|
max-w-a2 |
max-width: var(--sf-size--a-2);
|
max-w-a3 |
max-width: var(--sf-size--a-3);
|
max-w-a4 |
max-width: var(--sf-size--a-4);
|
max-w-a5 |
max-width: var(--sf-size--a-5);
|
max-w-a6 |
max-width: var(--sf-size--a-6);
|
max-w-a7 |
max-width: var(--sf-size--a-7);
|
max-w-a8 |
max-width: var(--sf-size--a-8);
|
max-w-a9 |
max-width: var(--sf-size--a-9);
|
max-w-b0 |
max-width: var(--sf-size--b-0);
|
max-w-b1 |
max-width: var(--sf-size--b-1);
|
max-w-b2 |
max-width: var(--sf-size--b-2);
|
max-w-b3 |
max-width: var(--sf-size--b-3);
|
max-w-b4 |
max-width: var(--sf-size--b-4);
|
max-w-b5 |
max-width: var(--sf-size--b-5);
|
max-w-b6 |
max-width: var(--sf-size--b-6);
|
max-w-b7 |
max-width: var(--sf-size--b-7);
|
max-w-b8 |
max-width: var(--sf-size--b-8);
|
max-w-b9 |
max-width: var(--sf-size--b-9);
|
max-w-c0 |
max-width: var(--sf-size--c-0);
|
max-w-c1 |
max-width: var(--sf-size--c-1);
|
max-w-c2 |
max-width: var(--sf-size--c-2);
|
max-w-c3 |
max-width: var(--sf-size--c-3);
|
max-w-c4 |
max-width: var(--sf-size--c-4);
|
max-w-c5 |
max-width: var(--sf-size--c-5);
|
max-w-c6 |
max-width: var(--sf-size--c-6);
|
max-w-c7 |
max-width: var(--sf-size--c-7);
|
max-w-c8 |
max-width: var(--sf-size--c-8);
|
max-w-c9 |
max-width: var(--sf-size--c-9);
|
max-w-d0 |
max-width: var(--sf-size--d-0);
|
max-w-d1 |
max-width: var(--sf-size--d-1);
|
max-w-d2 |
max-width: var(--sf-size--d-2);
|
max-w-d3 |
max-width: var(--sf-size--d-3);
|
max-w-d4 |
max-width: var(--sf-size--d-4);
|
max-w-d5 |
max-width: var(--sf-size--d-5);
|
max-w-d6 |
max-width: var(--sf-size--d-6);
|
max-w-d7 |
max-width: var(--sf-size--d-7);
|
max-w-d8 |
max-width: var(--sf-size--d-8);
|
max-w-d9 |
max-width: var(--sf-size--d-9);
|
max-w-e0 |
max-width: var(--sf-size--e-0);
|
max-w-e1 |
max-width: var(--sf-size--e-1);
|
max-w-e2 |
max-width: var(--sf-size--e-2);
|
max-w-e3 |
max-width: var(--sf-size--e-3);
|
max-w-e4 |
max-width: var(--sf-size--e-4);
|
max-w-e5 |
max-width: var(--sf-size--e-5);
|
max-w-e6 |
max-width: var(--sf-size--e-6);
|
max-w-e7 |
max-width: var(--sf-size--e-7);
|
max-w-e8 |
max-width: var(--sf-size--e-8);
|
max-w-e9 |
max-width: var(--sf-size--e-9);
|
max-w-f0 |
max-width: var(--sf-size--f-0);
|
max-w-f1 |
max-width: var(--sf-size--f-1);
|
max-w-f2 |
max-width: var(--sf-size--f-2);
|
max-w-f3 |
max-width: var(--sf-size--f-3);
|
max-w-f4 |
max-width: var(--sf-size--f-4);
|
max-w-f5 |
max-width: var(--sf-size--f-5);
|
max-w-f6 |
max-width: var(--sf-size--f-6);
|
max-w-f7 |
max-width: var(--sf-size--f-7);
|
max-w-f8 |
max-width: var(--sf-size--f-8);
|
max-w-f9 |
max-width: var(--sf-size--f-9);
|
max-w-g0 |
max-width: var(--sf-size--g-0);
|
max-w-g1 |
max-width: var(--sf-size--g-1);
|
max-w-g2 |
max-width: var(--sf-size--g-2);
|
max-w-g3 |
max-width: var(--sf-size--g-3);
|
max-w-g4 |
max-width: var(--sf-size--g-4);
|
max-w-g5 |
max-width: var(--sf-size--g-5);
|
max-w-g6 |
max-width: var(--sf-size--g-6);
|
max-w-g7 |
max-width: var(--sf-size--g-7);
|
max-w-g8 |
max-width: var(--sf-size--g-8);
|
max-w-g9 |
max-width: var(--sf-size--g-9);
|
max-w-h0 |
max-width: var(--sf-size--h-0);
|
max-w-h1 |
max-width: var(--sf-size--h-1);
|
max-w-h2 |
max-width: var(--sf-size--h-2);
|
max-w-h3 |
max-width: var(--sf-size--h-3);
|
max-w-h4 |
max-width: var(--sf-size--h-4);
|
max-w-h5 |
max-width: var(--sf-size--h-5);
|
max-w-h6 |
max-width: var(--sf-size--h-6);
|
max-w-h7 |
max-width: var(--sf-size--h-7);
|
max-w-h8 |
max-width: var(--sf-size--h-8);
|
max-w-h9 |
max-width: var(--sf-size--h-9);
|
max-w-i0 |
max-width: var(--sf-size--i-0);
|
max-w-i1 |
max-width: var(--sf-size--i-1);
|
max-w-i2 |
max-width: var(--sf-size--i-2);
|
max-w-i3 |
max-width: var(--sf-size--i-3);
|
max-w-i4 |
max-width: var(--sf-size--i-4);
|
max-w-i5 |
max-width: var(--sf-size--i-5);
|
max-w-i6 |
max-width: var(--sf-size--i-6);
|
max-w-i7 |
max-width: var(--sf-size--i-7);
|
max-w-i8 |
max-width: var(--sf-size--i-8);
|
max-w-i9 |
max-width: var(--sf-size--i-9);
|
Описание
Адаптивный модификатор. Изменяет максимальную ширину в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
max-w-a1...max-w-i9- максимальная ширина равна фиксированным размерам из системы размеров фреймворка;max-w-(sm|md|lg|xl)- максимальная ширина равна размерам контрольных точек;max-w-full- максимальная ширина равна ширине родительского элемента;max-w-screen- максимальная ширина равна шиирине экрана;max-w-min- внутренняя минимальная ширина;max-w-max- внутренняя предпочтительная ширина;max-w-fit- аналогичноmax-w-max;max-w-prose- максимаьная ширина равна 65 знакам;max-w-0- максимальная ширина равна нулю;max-w-none- максимальная ширина не задана.
Фиксированная максимальная ширина
Фиксированная ширина позволяет точно задать размер элемента. Для фиксированной высоты - используется система размеров.
max-w-e4max-w-e8max-w-f2max-w-f6<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 устанавливает максимальную ширину равной ширине родительского элемента.
max-w-full
<div class="max-w-full"></div>
Минимальная ширина контента
Модификатор max-w-min устанавливает максимальную ширину равную внутренней минимальной ширине контента.
Lorem
Lorem ipsum dolor sit amet, consectetur
<div class="max-w-min">Lorem</div>
<div class="max-w-min">Lorem ipsum dolor sit amet, consectetur</div>
Максимальная ширина контента
Модификатор max-w-max устанавливает максимальную ширину равную внутренней предпочтительной ширине контента.
Lorem ipsum dolor sit amet, consectetur
<div class="w-d0">
<div class="max-w-max">Lorem ipsum dolor sit amet, consectetur</div>
</div>
Ширина экрана
Модификатор max-w-screen устанавливает максимальную ширину равную ширине экрана, но не более размера родительского элемента.
max-w-screen
<div class="w-full">
<div class="max-w-screen"></div>
</div>
Адаптивность
Для установки макстимальной ширины, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:max-w-full для установки максимальной ширины в 100% для экранов размером Medium и больше.
<div class="md:w-full"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.