Ширина

width
sm
md
lg
xl

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

Классы

Класс Значение
w-auto width: auto;
w-full width: 100%;
w-screen width: 100vw;
w-min width: min-content;
w-max width: max-content;
w-fit width: fit-content;
w-1/2 width: 50%;
w-1/3 width: 33.333333%;
w-2/3 width: 66.666667%;
w-1/4 width: 25%;
w-2/4 width: 50%;
w-3/4 width: 75%;
w-1/5 width: 20%;
w-2/5 width: 40%;
w-3/5 width: 60%;
w-4/5 width: 80%;
w-1/6 width: 16.666667%;
w-2/6 width: 33.333333%;
w-3/6 width: 50%;
w-4/6 width: 66.666667%;
w-5/6 width: 83.333333%;
w-1/12 width: 8.333333%;
w-2/12 width: 16.666667%;
w-3/12 width: 25%;
w-4/12 width: 33.333333%;
w-5/12 width: 41.666667%;
w-6/12 width: 50%;
w-7/12 width: 58.333333%;
w-8/12 width: 66.666667%;
w-9/12 width: 75%;
w-10/12 width: 83.333333%;
w-11/12 width: 91.666667%;
w-px width: 1px;
w-0 width: 0;
w-a0 width: var(--sf-a0);
w-a1 width: var(--sf-a1);
w-a2 width: var(--sf-a2);
w-a3 width: var(--sf-a3);
w-a4 width: var(--sf-a4);
w-a5 width: var(--sf-a5);
w-a6 width: var(--sf-a6);
w-a7 width: var(--sf-a7);
w-a8 width: var(--sf-a8);
w-a9 width: var(--sf-a9);
w-b0 width: var(--sf-b0);
w-b1 width: var(--sf-b1);
w-b2 width: var(--sf-b2);
w-b3 width: var(--sf-b3);
w-b4 width: var(--sf-b4);
w-b5 width: var(--sf-b5);
w-b6 width: var(--sf-b6);
w-b7 width: var(--sf-b7);
w-b8 width: var(--sf-b8);
w-b9 width: var(--sf-b9);
w-c0 width: var(--sf-c0);
w-c1 width: var(--sf-c1);
w-c2 width: var(--sf-c2);
w-c3 width: var(--sf-c3);
w-c4 width: var(--sf-c4);
w-c5 width: var(--sf-c5);
w-c6 width: var(--sf-c6);
w-c7 width: var(--sf-c7);
w-c8 width: var(--sf-c8);
w-c9 width: var(--sf-c9);
w-d0 width: var(--sf-d0);
w-d1 width: var(--sf-d1);
w-d2 width: var(--sf-d2);
w-d3 width: var(--sf-d3);
w-d4 width: var(--sf-d4);
w-d5 width: var(--sf-d5);
w-d6 width: var(--sf-d6);
w-d7 width: var(--sf-d7);
w-d8 width: var(--sf-d8);
w-d9 width: var(--sf-d9);
w-e0 width: var(--sf-e0);
w-e1 width: var(--sf-e1);
w-e2 width: var(--sf-e2);
w-e3 width: var(--sf-e3);
w-e4 width: var(--sf-e4);
w-e5 width: var(--sf-e5);
w-e6 width: var(--sf-e6);
w-e7 width: var(--sf-e7);
w-e8 width: var(--sf-e8);
w-e9 width: var(--sf-e9);
w-f0 width: var(--sf-f0);
w-f1 width: var(--sf-f1);
w-f2 width: var(--sf-f2);
w-f3 width: var(--sf-f3);
w-f4 width: var(--sf-f4);
w-f5 width: var(--sf-f5);
w-f6 width: var(--sf-f6);
w-f7 width: var(--sf-f7);
w-f8 width: var(--sf-f8);
w-f9 width: var(--sf-f9);
w-g0 width: var(--sf-g0);
w-g1 width: var(--sf-g1);
w-g2 width: var(--sf-g2);
w-g3 width: var(--sf-g3);
w-g4 width: var(--sf-g4);
w-g5 width: var(--sf-g5);
w-g6 width: var(--sf-g6);
w-g7 width: var(--sf-g7);
w-g8 width: var(--sf-g8);
w-g9 width: var(--sf-g9);
w-h0 width: var(--sf-h0);
w-h1 width: var(--sf-h1);
w-h2 width: var(--sf-h2);
w-h3 width: var(--sf-h3);
w-h4 width: var(--sf-h4);
w-h5 width: var(--sf-h5);
w-h6 width: var(--sf-h6);
w-h7 width: var(--sf-h7);
w-h8 width: var(--sf-h8);
w-h9 width: var(--sf-h9);
w-i0 width: var(--sf-i0);
w-i1 width: var(--sf-i1);
w-i2 width: var(--sf-i2);
w-i3 width: var(--sf-i3);
w-i4 width: var(--sf-i4);
w-i5 width: var(--sf-i5);
w-i6 width: var(--sf-i6);
w-i7 width: var(--sf-i7);
w-i8 width: var(--sf-i8);
w-i9 width: var(--sf-i9);

Описание

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

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • w-0 - ширина равна нулю;
    • w-px - ширина равна 1px;
    • w-a1 ... w-i9- ширина равна фиксированным размерам из системы размеров фреймворка;
    • w-1/2 ... w-11/12 - ширина равна доли ширины родительского элемента;
    • w-auto - автоматическая ширина;
    • w-full - ширина равна ширине родительского элемента;
    • w-screen - ширина равна ширине экрана;
    • w-min - ширина равна внутренней минимальной ширине контента;
    • w-max - ширина равна внутренней максимальной ширине контена;
    • w-fit - ширина равна наибольшему из:
      • внутренней минимальной ширины;
      • меньшему из внутренней предпочтительной ширины и доступной ширины.

Фиксированная ширина

Фиксированная ширина позволяет точно задать размер элемента. Для фиксированной ширины - используется система размеров.

w-c4
w-d4
w-e4
w-f4
<div class="w-c4"></div>
<div class="w-d4"></div>
<div class="w-e4"></div>
<div class="w-f4"></div>

Относительная ширина

Относительную ширину рекомендуется использовать когда необходимо чтобы ширина элемента зависила от ширины родительского элемента.

Совместно с flexbox относительую ширину можно использовать для построения одномерной сетки.

w-1/2
w-1/2
w-2/5
w-3/5
w-1/3
w-2/3
w-1/5
w-4/5
w-1/6
w-5/6
w-full
<div class="flex">
	<div class="w-1/2"></div><div class="w-1/2"></div>
	<div class="w-2/5"></div><div class="w-3/5"></div>
	<div class="w-1/3"></div><div class="w-2/3"></div>
	<div class="w-1/5"></div><div class="w-4/5"></div>
	<div class="w-1/6"></div><div class="w-5/6"></div>
	<div class="w-full"></div>
</div>

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

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

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

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

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

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

Автоматическая ширина контента

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

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

Ширина экрана

Модификатор w-screen устанавливает ширину равную ширине экрана.

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

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

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

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

<div class="md:w-1/2"></div>

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

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