К содержанию

Навигация

Главное

Содержание

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

Классы максимальной ширины задают свойство max-width: элемент может быть уже, но не шире заданного значения. Берите их, чтобы ограничить ширину блока на широком экране, строку текста для удобного чтения или изображение шириной родителя.

Пример

Шкала размеров

Классы max-w-a0 … max-w-i9 берут предел из шкалы размеров. Полосы стремятся занять всю ширину (w-full) и останавливаются на пределе; полоса с пределом шире колонки занимает всю её ширину.

w-full max-w-d6
w-full max-w-e6
w-full max-w-f6
w-full max-w-g6
w-full max-w-h0

Пределы по именам ширины экрана

max-w-sm … max-w-xxl — пределы, названные по ширинам экрана. Полоса с пределом шире колонки занимает всю её ширину; меняйте ширину окна просмотра, чтобы увидеть разницу между ними.

w-full max-w-sm
w-full max-w-md
w-full max-w-lg
w-full max-w-xl
w-full max-w-xxl

Длина строки

max-w-prose ограничивает строку текста длиной, удобной для чтения. max-w-none снимает ограничение.

max-w-prose

Строка удобна для чтения, когда в ней от шестидесяти до семидесяти пяти знаков: глаз легко находит начало следующей строки. Слишком длинная строка на широком экране утомляет, слишком короткая разбивает фразы на обрывки.

max-w-none

Строка удобна для чтения, когда в ней от шестидесяти до семидесяти пяти знаков: глаз легко находит начало следующей строки. Слишком длинная строка на широком экране утомляет, слишком короткая разбивает фразы на обрывки.

Ширина родителя и содержимого

Пунктирная рамка — родитель. С max-w-full элемент заданной ширины не выходит за родителя. max-w-min сужает блок до самого длинного слова, max-w-fit — до длины текста.

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

С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину окна просмотра: на узком экране полоса во всю ширину, с ширины md она ограничена.

Классы

Класс CSS Значения
max-w-full max-width: 100% —
max-w-screen max-width: 100vw —
max-w-min max-width: -webkit-min-content; max-width: -moz-min-content; max-width: min-content —
max-w-max max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content —
max-w-fit max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content —
max-w-prose max-width: 65ch —
max-w-0 max-width: 0 —
max-w-none max-width: none —
max-w-sm max-width: 32rem —
max-w-md max-width: 44rem —
max-w-lg max-width: 60rem —
max-w-xl max-width: 72rem —
max-w-xxl max-width: 80rem —
max-w-{значение} max-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

Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:max-w-full.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.

Переменная Значение по умолчанию
--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-full с пределом из шкалы размеров, например max-w-h0, или с пределом по имени ширины экрана, например max-w-md.
  • Текст статьи — max-w-prose.
  • Изображение и другой элемент с собственной шириной — max-w-full, чтобы он уменьшался вместе с родителем.
  • max-w-none снимает предел, например на широком экране.
HTML
<form class="w-full max-w-g0">…</form>

<article class="max-w-prose">…</article>

<img class="max-w-full" src="photo.jpg" alt="">

Блок по центру

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

HTML
<main class="w-full max-w-lg m-inline-auto">…</main>

Предел по ширине экрана

HTML
<div class="max-w-none md:max-w-f6">…</div>

Ограничения

  • Пределы max-w-sm … max-w-xxl — фиксированные значения в пикселях из CSS выпуска; переменные темы их не меняют.
  • max-w-screen равна ширине окна просмотра вместе с вертикальной полосой прокрутки.
  • Предел сильнее ширины: при w-full max-w-f6 элемент не шире max-w-f6. Минимальная ширина сильнее предела.
  • У семейства нет префиксов состояния и отрицательных значений.

См. также

Settings

Тема
Font size
Page width