CSS свойство max-inline-size

Определение и использование

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

Если размер содержимого в направлении векторного направления меньше максимального размера, то max-inline-size значение атрибута не действует.

Если размер содержимого в направлении векторного направления больше максимального размера, то будет применяться max-inline-size значения атрибутов.

Обратите внимание:соответствующие CSS-свойства writing-mode определяет направление векторного направления, что влияет на max-inline-size результаты свойств. Для английских страниц, блоковое направление направлено вниз, а векторное направление слева направо.

CSS max-inline-size атрибуты зависят от свойств CSS Предыдущая страница и max-width Очень похожи, но max-inline-size Атрибут зависит от направления векторного направления.

Пример

Пример 1

Установить максимальный размер элемента <div> в направлении векторного направления 60 пикселей:

div {
  max-inline-size: 60px;
}

Попробуйте сами

Пример 2: Режим написания

Установить максимальный размер элемента <div> в направлении векторного направления writing-mode Когда значение атрибута установлено в vertical-rl, направление векторного направления меняется с бокового на вертикальное, что влияет на max-inline-size Как работает атрибут:

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

Попробуйте сами

Пример 3: Max-inline-size vs Inline-size

Наблюдайте за элементом <div> (inline-size на 100px) и другого элемента <div> (max-inline-size различные реакции при изменении размера содержимого (100px):

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

Попробуйте сами

Синтаксис CSS

max-inline-size: auto|length|initial|inherit;

Значение атрибута

Значение Описание
auto По умолчанию. Значение по умолчанию max-inline-size для элемента.
length Использовать единицы измерения px, pt, cm и т.д. См. также:Единицы CSS.
% Указать размер в процентах по отношению к родительскому элементу на соответствующей оси.
initial Установить этот атрибут в его значение по умолчанию. См. также initial.
inherit Этот атрибут наследуется от родительского элемента. См. также inherit.

Технические детали

Значение по умолчанию: auto
Ингеритация: Нет
Создание анимации: Поддерживается. См. также:Свойства анимации.
Версия: CSS3
Синтаксис JavaScript: object.style.maxInlineSize="60px"

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

Хром Эдж Фаерфокс Сафари Опера
57.0 79.0 79.0 41.0 12.1

44.0

Связанные страницыСвойство CSS inline-size

Связанные страницыCSS свойство min-inline-size

Связанные страницыCSS свойство max-height

Связанные страницыCSS свойство max-width

Связанные страницыСвойство writing-mode в CSS