Ширина
Классы ширины задают свойство width. Берите их, когда элементу нужна
определённая ширина: точная из шкалы размеров, доля родителя, ширина по
содержимому или ширина окна просмотра.
Пример
Шкала размеров
Классы w-a0 … w-i9 берут значение из шкалы размеров: буква — группа,
цифра — шаг внутри неё. Над каждой полосой — класс, который задаёт её ширину.
w-b6
w-c6
w-d6
w-e6
w-f6
w-g6
Доли родителя
Дробь — доля ширины родителя: пятые, шестые и двенадцатые доли складываются в ряды колонок.
w-1/4w-1/3w-1/2w-2/3w-3/4w-fullw-3/12w-9/12Проценты
w-1 … w-99 задают ширину в процентах от родителя с шагом в один процент.
w-10w-25w-50w-75w-99По содержимому
Пунктирная рамка — родитель. w-auto занимает всю его ширину, w-fit и
w-max равны длине текста, w-min — самому длинному слову.
Ширина экрана
С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину
окна просмотра: на узком экране полоса во всю ширину, с ширины md — половина,
с ширины xl — треть.
Классы
| Класс | CSS | Значения |
|---|---|---|
w-auto |
width: auto |
— |
w-1/1 |
width: 100% |
— |
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-full |
width: 100% |
— |
w-screen |
width: 100vw |
— |
w-screen-{значение} |
width: var(--sf-viewport-width-{значение}) |
small, large, dynamic |
w-{значение} |
width: -webkit-{значение}-content; width: -moz-{значение}-content; width: {значение}-content |
min, max, fit |
w-px |
width: 1px |
— |
w-0 |
width: 0 |
— |
w-{значение} |
width: var(--sf-{значение}) |
a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, b0, b1, b2, b3, b4, b5, b6, b7, b8, b9, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, e0, e1, e2, e3, e4, e5, e6, e7, e8, e9, f0, f1, f2, f3, f4, f5, f6, f7, f8, f9, g0, g1, g2, g3, g4, g5, g6, g7, g8, g9, h0, h1, h2, h3, h4, h5, h6, h7, h8, h9, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9 |
w-{значение} |
width: {значение}% |
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99 |
Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:w-auto.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.
| Переменная | Значение по умолчанию |
|---|---|
--sf-viewport-width-small |
100vw |
--sf-viewport-width-large |
100vw |
--sf-viewport-width-dynamic |
100vw |
--sf-a0 |
0rem |
--sf-a1 |
0.0625rem |
--sf-a2 |
0.125rem |
--sf-a3 |
0.1875rem |
--sf-a4 |
0.25rem |
--sf-a5 |
0.3125rem |
--sf-a6 |
0.375rem |
--sf-a7 |
0.4375rem |
--sf-a8 |
0.5rem |
--sf-a9 |
0.5625rem |
--sf-b0 |
0.625rem |
--sf-b1 |
0.6875rem |
--sf-b2 |
0.75rem |
--sf-b3 |
0.8125rem |
--sf-b4 |
0.875rem |
--sf-b5 |
0.9375rem |
--sf-b6 |
1rem |
--sf-b7 |
1.0625rem |
--sf-b8 |
1.125rem |
--sf-b9 |
1.1875rem |
--sf-c0 |
1.25rem |
--sf-c1 |
1.375rem |
--sf-c2 |
1.5rem |
--sf-c3 |
1.625rem |
--sf-c4 |
1.75rem |
--sf-c5 |
1.875rem |
--sf-c6 |
2rem |
--sf-c7 |
2.125rem |
--sf-c8 |
2.25rem |
--sf-c9 |
2.375rem |
--sf-d0 |
2.5rem |
--sf-d1 |
2.75rem |
--sf-d2 |
3rem |
--sf-d3 |
3.25rem |
--sf-d4 |
3.5rem |
--sf-d5 |
3.75rem |
--sf-d6 |
4rem |
--sf-d7 |
4.25rem |
--sf-d8 |
4.5rem |
--sf-d9 |
4.75rem |
--sf-e0 |
5rem |
--sf-e1 |
5.5rem |
--sf-e2 |
6rem |
--sf-e3 |
6.5rem |
--sf-e4 |
7rem |
--sf-e5 |
7.5rem |
--sf-e6 |
8rem |
--sf-e7 |
8.5rem |
--sf-e8 |
9rem |
--sf-e9 |
9.5rem |
--sf-f0 |
10rem |
--sf-f1 |
11rem |
--sf-f2 |
12rem |
--sf-f3 |
13rem |
--sf-f4 |
14rem |
--sf-f5 |
15rem |
--sf-f6 |
16rem |
--sf-f7 |
17rem |
--sf-f8 |
18rem |
--sf-f9 |
19rem |
--sf-g0 |
20rem |
--sf-g1 |
22rem |
--sf-g2 |
24rem |
--sf-g3 |
26rem |
--sf-g4 |
28rem |
--sf-g5 |
30rem |
--sf-g6 |
32rem |
--sf-g7 |
34rem |
--sf-g8 |
36rem |
--sf-g9 |
38rem |
--sf-h0 |
40rem |
--sf-h1 |
44rem |
--sf-h2 |
48rem |
--sf-h3 |
52rem |
--sf-h4 |
56rem |
--sf-h5 |
60rem |
--sf-h6 |
64rem |
--sf-h7 |
68rem |
--sf-h8 |
72rem |
--sf-h9 |
76rem |
--sf-i0 |
80rem |
--sf-i1 |
88rem |
--sf-i2 |
96rem |
--sf-i3 |
104rem |
--sf-i4 |
112rem |
--sf-i5 |
120rem |
--sf-i6 |
128rem |
--sf-i7 |
136rem |
--sf-i8 |
144rem |
--sf-i9 |
152rem |
Применение
Как выбрать значение
- Точная ширина элемента интерфейса — иконки, аватара, поля, колонки
фиксированной ширины — класс шкалы размеров, например
w-e8. Значения шагов — на странице Шкала размеров. - Колонки в ряду — доли:
w-1/2,w-1/3,w-3/12.w-1/1иw-fullдают одно и то же значение. - Произвольный процент —
w-1…w-99; для всей ширины —w-full. - Ширина по тексту —
w-fit: элемент не шире содержимого и не шире родителя.w-maxвыводит текст одной строкой и выходит за родителя, если текст длиннее. w-autoвозвращает ширину по умолчанию, например, чтобы отменить значение с меньшей ширины экрана.
<div class="flex">
<aside class="w-3/12">Меню</aside>
<main class="w-9/12">Содержимое</main>
</div>
<img class="w-d6 h-d6" src="avatar.png" alt="">
Ширина окна
w-screen равна ширине окна просмотра. w-screen-small,
w-screen-large и w-screen-dynamic берут малую, большую и текущую ширину
окна (svw, lvw, dvw) из переменных темы; в браузере без поддержки этих
единиц значение — ширина окна.
Ширина по ширине экрана
Базовый класс задаёт ширину на узком экране, класс с префиксом — от указанной ширины и шире.
<div class="w-full md:w-1/2 xl:w-1/3">Карточка</div>
Ограничения
- Ширина включает внутренние отступы и рамку: Framework задаёт всем элементам
box-sizing: border-box. - Доли и проценты считаются от ширины родителя. У строчного элемента ширина
не действует — сделайте его блочным, например классом
inline-block. - Внутри окна с вертикальной полосой прокрутки
w-screenшире области страницы и даёт горизонтальную прокрутку. - У семейства нет префиксов состояния и отрицательных значений.