Размеры — inline-size, block-size и их min/max

Самая базовая пара логических свойств — та, что заменяет width и height. Обещают они одно и то же — задать ширину и высоту блоку. Разница в том, на какую ось они смотрят.

Что вместо чего

Аналогично работают min/max-варианты:

• min-inline-size ↔ min-width (для горизонтального текста);
• max-inline-size ↔ max-width;
• min-block-size ↔ min-height;
• max-block-size ↔ max-height.

Простой пример

Карточка с фиксированной шириной и предельной высотой:

.product-card {
  inline-size: 300px;
  max-block-size: 400px;
  overflow: auto;
}

В горизонтальной вёрстке это эквивалентно width: 300px; max-height: 400px. Если завтра тот же блок поместить в контейнер с writing-mode: vertical-rl, стили автоматически «развернутся»: 300 px станут размером по вертикали (она теперь inline), а 400 px — пределом по горизонтали (она теперь block).

Что брать — width или inline-size?

На одноязычном проекте без вертикальных режимов разницы по поведению нет: inline-size: 300px и width: 300px делают одно и то же. Но если хоть где-то в проекте может возникнуть RTL или вертикальная типографика — писать сразу логические безопаснее.

Бонус для одноязычного: inline-size читается понятнее, когда вы сами через год будете читать код — сразу видно, что речь о размере вдоль оси текста, а не о случайной «ширине».

В сочетании с intrinsic-значениями

Логические свойства размеров отлично работают со словами fit-content, min-content, max-content. Особенно полезен inline-size: fit-content — блок занимает ровно столько вдоль строки, сколько нужно содержимому, и эта логика работает в любом направлении письма.

.tag {
  inline-size: fit-content;
  padding-inline: 12px;
  padding-block: 4px;
  background: #dbeafe;
  border-radius: 4px;
}

Подробный разбор самих ключевых слов fit-content/min-content/max-content — в отдельной статье про размеры по содержимому.

Логические viewport-единицы

В дополнение к свойствам логические оси работают и для единиц. Помимо привычных vh/vw в современных браузерах есть:

• vi, svi, lvi, dvi — процент вдоль inline-оси viewport (ширина при горизонтальном тексте, высота при вертикальном);
• vb, svb, lvb, dvb — процент вдоль block-оси.

Запись inline-size: 100svi означает - возьми «всю ширину видимой области по строке», и она сама адаптируется при смене writing-mode.