max-block-size¶
Свойство max-block-size
определяет максимальный размер элемента в направлении, перпендикулярном направлению письма, указанному в writing-mode
. То есть, если направление записи горизонтальное, то max-block-size
эквивалентно max-height
; если направление записи вертикальное, max-block-size
равен max-width
.
Максимальная длина другого размера указывается с помощью свойства max-inline-size
.
Логические размеры
- block-size
- inline-size
- max-block-size
- max-inline-size
- min-block-size
- min-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>
См. также¶
Ссылки¶
max-block-size
MDN (англ.)- Новые логические свойства в CSS!