Перейти к содержанию

max-block-size

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

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

Логические размеры

Синтаксис

/* <length> values */
max-block-size: 300px;
max-block-size: 25em;

/* <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: fill-available;

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

Значения

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

<length>
Максимальная ширина как абсолютное значение.
<percentage>
Максимальная ширина, выраженная в процентах от ширины содержащего блока.

Значения ключевых слов:

none
Ширина не имеет максимального значения.
max-content
Внутренняя предпочтительная ширина.
min-content
Собственная минимальная ширина.
fill-available
Ширина содержащего блока минус горизонтальное поле, граница и отступ.
fit-content
То же, что и max-content.

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

Пример

.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  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;
}

<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>

См. также

Ссылки