box-orient

Нестандартный: Эта функция нестандартна и не поддерживается стандартами. Не используйте её на сайтах, ориентированных на веб, в производственной среде: она не будет работать для всех пользователей. Также могут существовать значительные несовместимости между реализациями, а поведение может измениться в будущем.

Устаревший: Эта функция больше не рекомендуется. Хотя некоторые браузеры могут её поддерживать, она может быть уже удалена из соответствующих веб-стандартов, может быть в процессе удаления или сохраняться только для целей совместимости. Избегайте её использования и, при возможности, обновите существующий код; обратитесь к таблице совместимости внизу этой страницы для принятия решения. Имейте в виду, что эта функция может перестать работать в любой момент.

Предупреждение: Это свойство черновика модуля CSS гибкой компоновки, и оно было заменено более новым стандартом. Смотрите flexbox для информации о текущем стандарте.

Свойство box-orient CSS задаёт, выстраиваются ли содержимое элемента по горизонтали или по вертикали.

Синтаксис

/* Keyword values */
box-orient: horizontal;
box-orient: vertical;
box-orient: inline-axis;
box-orient: block-axis;

/* Global values */
box-orient: inherit;
box-orient: initial;
box-orient: unset;

Свойство box-orient задаётся одним из ключевых значений, перечисленных ниже.

Значения

horizontal: Элемент выстраивает своё содержимое по горизонтали.
vertical: Элемент выстраивает своё содержимое по вертикали.
inline-axis (HTML): Элемент отображает свои дочерние элементы вдоль оси inline.
block-axis (HTML): Элемент отображает свои дочерние элементы вдоль оси block.

Оси inline и block — это зависящие от направления письма ключевые слова, которые в английском языке соответствуют horizontal и vertical соответственно.

Описание

Элементы HTML DOM по умолчанию выстраивают своё содержимое вдоль оси inline. Это свойство CSS будет применяться только к элементам HTML с значением CSS display box или inline-box.

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

Начальное значение	`inline-axis` (`horizontal` в XUL)
Применимо к	элементам с значением CSS `display` `box` или `inline-box`
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

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

box-orient =
  horizontal | vertical | inline-axis | block-axis | inherit

Примеры

Установка горизонтальной ориентации блока

Здесь свойство box-orient заставит два <p> раздела в примере отобразиться в одной строке.

HTML

<div class="example">
  <p>I will be to the left of my sibling.</p>
  <p>I will be to the right of my sibling.</p>
</div>

CSS

div.example {
  display: -moz-box; /* Mozilla */
  display: -webkit-box; /* WebKit */
  display: box; /* As specified */

  /* Children should be oriented vertically */
  -moz-box-orient: horizontal; /* Mozilla */
  -webkit-box-orient: horizontal; /* WebKit */
  box-orient: horizontal; /* As specified */
}

Результат

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

Не является частью стандарта.

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`box-orient`	1	12	491	15	31.1–3	18	494	14	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient