Свойство CSS `box-orient`

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

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

Предупреждение: Это свойство из исходного черновика модуля CSS Flexible Box Layout, которое было заменено более новым стандартом. Информацию о действующем стандарте см. в разделе 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;

Значения

Это свойство задаётся одним из следующих ключевых слов:

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

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

Описание

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

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

Исходное значение	inline-axis
Применяется к	элементам со значением свойства CSS `display` <code>box</code> или <code>inline-box</code>
Наследуется	нет
Вычисленное значение	как задано
Тип анимации	дискретный

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

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

Примеры

Задание горизонтальной ориентации блока

В этом примере свойство 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	WebView для iOS
`box-orient`	1	12	49 1	15	3 1.1–3	18	49 4	14	1	1.0	4.4	1

См. также

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