Свойство CSS `max-block-size`

Свойство max-block-size CSS задаёт максимальный размер элемента в направлении, противоположном направлению письма, заданному свойством writing-mode. Иными словами, если направление письма горизонтальное, то max-block-size эквивалентно свойству max-height; если направление письма вертикальное, max-block-size эквивалентно свойству max-width.

Максимальная длина по другому измерению задаётся с помощью свойства max-inline-size.

Это полезно, поскольку max-width всегда используется для горизонтальных размеров, а max-height — для вертикальных. Если вам нужно задавать длины на основе размера текстового содержимого, необходимо учитывать направление письма.

Вместо того чтобы использовать max-height или max-width, следует использовать max-block-size для задания максимальной «высоты» содержимого (даже если это значение не является вертикальным) и max-inline-size для задания максимальной «ширины» содержимого (хотя она может быть вертикальной, а не горизонтальной). См. примеры writing-mode, демонстрирующие различные режимы письма.

Попробуйте

max-block-size: 150px;
writing-mode: horizontal-tb;

max-block-size: 150px;
writing-mode: vertical-rl;

max-block-size: 20px;
writing-mode: horizontal-tb;

max-block-size: 75%;
writing-mode: vertical-lr;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box where you can change the maximum block size. <br />This will
    limit the size in the block dimension, potentially causing an overflow.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  justify-content: center;
  color: white;
}

Синтаксис

/* <length> values */
max-block-size: 300px;
max-block-size: 25em;
max-block-size: anchor-size(--my-anchor self-inline, 250px);
max-block-size: calc(anchor-size(width) / 2);

/* <percentage> values */
max-block-size: 75%;

/* Keyword values */
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content;
max-block-size: fit-content(20em);

/* Global values */
max-block-size: inherit;
max-block-size: initial;
max-block-size: revert;
max-block-size: revert-layer;
max-block-size: unset;

Значения

Значением свойства max-block-size может быть любое значение, допустимое для свойств max-width и max-height:

<length>

Задаёт max-block-size в виде абсолютного значения.

<percentage>

Задаёт max-block-size в процентах от размера содержащего блока по блочной оси.

none

Размер блока не ограничен.

max-content

Внутренний предпочтительный max-block-size.

min-content

Внутренний минимальный max-block-size.

fit-content

Использует доступное пространство, но не больше, чем max-content, то есть min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>)

Использует формулу fit-content, заменяя доступное пространство указанным аргументом, то есть min(max-content, max(min-content, argument)).

Как writing-mode влияет на направление

Значения writing-mode влияют на соответствие между max-block-size и max-width или max-height следующим образом:

Формальное определение

Формальный синтаксис

max-block-size = 
  <'max-width'>

Примеры

Задание max-block-size для горизонтального и вертикального текста

В этом примере один и тот же текст (первые предложения романа «Моби Дик» Германа Мелвилла) представлен в режимах письма horizontal-tb и vertical-rl.

Все остальные параметры двух блоков совпадают, включая значения, используемые для max-block-size.

HTML

В HTML создаются два блока <div>, для которых задаётся свойство writing-mode с помощью классов horizontal или vertical. Оба блока имеют общий класс standard-box, который задаёт цвета и отступы, а также соответствующие значения max-block-size.

<p>Writing mode <code>horizontal-tb</code> (the default):</p>
<div class="standard-box horizontal">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>

<p>Writing mode <code>vertical-rl</code>:</p>
<div class="standard-box vertical">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>

CSS

В CSS определены три класса. Первый, standard-box, применяется к обоим блокам, как показано выше. Он задаёт стандартные стили, в том числе минимальные и максимальные размеры по блочной оси, размер шрифта и прочее.

Затем идут классы horizontal и vertical, которые добавляют блоку свойство writing-mode со значением horizontal-tb или vertical-rl в зависимости от используемого класса.

.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: black;
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Соответствующие физические свойства: max-width и max-height
• Задание максимального размера по другому направлению: max-inline-size
• writing-mode