CSS-свойство `box-flex`

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

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

Предупреждение: Это свойство предназначено для управления частями блочной модели XUL. Оно не соответствует ни старым черновикам модуля гибкой блочной раскладки CSS для box-flex (на которых основывалось это свойство), ни поведению -webkit-box-flex (которое основано на этих черновиках). Информацию о текущем стандарте см. в разделе flexbox.

Свойства -moz-box-flex и -webkit-box-flex CSS определяют, как -moz-box или -webkit-box увеличивается, чтобы заполнить содержащий его блок в соответствии с направлением раскладки этого блока.

Синтаксис

/* <number> values */
-moz-box-flex: 0;
-moz-box-flex: 2;
-moz-box-flex: 3.5;
-webkit-box-flex: 0;
-webkit-box-flex: 2;
-webkit-box-flex: 3.5;

/* Global values */
-moz-box-flex: inherit;
-moz-box-flex: initial;
-moz-box-flex: revert;
-moz-box-flex: revert-layer;
-moz-box-flex: unset;
-webkit-box-flex: inherit;
-webkit-box-flex: initial;
-webkit-box-flex: revert;
-webkit-box-flex: revert-layer;
-webkit-box-flex: unset;

Свойство box-flex задаётся значением <number>. Если значение равно 0, размер блока не увеличивается. Если оно больше 0, блок увеличивается, заполняя пропорциональную часть доступного пространства.

Примечания

Содержащий блок распределяет доступное дополнительное пространство пропорционально значению flex каждого элемента содержимого.

Элементы содержимого с нулевым значением flex не увеличиваются.

Если ненулевое значение flex задано только одному элементу содержимого, он увеличивается, заполняя доступное пространство.

Элементы содержимого с одинаковым значением flex увеличиваются на одинаковую абсолютную величину.

Если значение flex задаётся с помощью атрибута flex элемента, стиль игнорируется.

Чтобы элементы XUL в содержащем блоке имели одинаковый размер, задайте атрибуту equalsize содержащего блока значение always. Этому атрибуту не соответствует свойство CSS.

Чтобы все элементы содержимого в содержащем блоке имели одинаковый размер, задайте им одинаковый фиксированный размер (например, height: 0) и одинаковое значение box-flex больше нуля (например, -moz-box-flex: 1).

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

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

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

box-flex = <number>

Примеры

Настройка box-flex

<div class="example">
  <p>I will expand to fill extra space</p>
  <p>I will not expand</p>
</div>

div.example {
  display: -moz-box;
  display: -webkit-box;
  border: 1px solid black;
  width: 100%;
}
div.example > p:nth-child(1) {
  -moz-box-flex: 1; /* Mozilla */
  -webkit-box-flex: 1; /* WebKit */
  border: 1px solid black;
}
div.example > p:nth-child(2) {
  -moz-box-flex: 0; /* Mozilla */
  -webkit-box-flex: 0; /* WebKit */
  border: 1px solid black;
}

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

Не входит ни в один стандарт.

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

	Настольные устройства					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`box-flex`	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-flex