box-pack

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

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

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

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

Направление компоновки зависит от ориентации элемента: горизонтальной или вертикальной.

Синтаксис

/* Keyword values */
box-pack: start;
box-pack: center;
box-pack: end;
box-pack: justify;

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

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

Значения

start: Блок упаковывает содержимое в начале, оставляя любое дополнительное пространство в конце.
center: Блок упаковывает содержимое по центру, равномерно распределяя любое дополнительное пространство между началом и концом.
end: Блок упаковывает содержимое в конце, оставляя любое дополнительное пространство в начале.
justify: Пространство распределяется равномерно между каждым дочерним элементом, при этом ни одно дополнительное пространство не размещается перед первым дочерним элементом или после последнего дочернего элемента. Если имеется только один дочерний элемент, значение обрабатывается так, как если бы оно было start.

Примечания

Граница блока, обозначенная как начало в целях упаковки, зависит от ориентации и направления блока:

Для горизонтальных элементов началом является верхняя граница.
Для вертикальных элементов началом является левая граница.

	Нормальное	Обратное
Горизонтальное	слева	справа
Вертикальное	сверху	снизу

Граница, противоположная началу, обозначается как конец.

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

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

Начальное значение	`start`
Применяется к	элементам с значением CSS `display` `-moz-box`, `-moz-inline-box`, `-webkit-box` или `-webkit-inline-box`
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

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

box-pack =
  start | center | end | justify

Примеры

Примеры box-pack

div.example {
  border-style: solid;

  display: -moz-box; /* Mozilla */
  display: -webkit-box; /* WebKit */

  /* Make this box taller than the children,
     so there is room for the box-pack */
  height: 300px;
  /* Make this box wide enough to show the contents
     are centered horizontally */
  width: 300px;

  /* Children should be oriented vertically */
  -moz-box-orient: vertical; /* Mozilla */
  -webkit-box-orient: vertical; /* WebKit */

  /* Align children to the horizontal center of this box */
  -moz-box-align: center; /* Mozilla */
  -webkit-box-align: center; /* WebKit */

  /* Pack children to the bottom of this box */
  -moz-box-pack: end; /* Mozilla */
  -webkit-box-pack: end; /* WebKit */
}

div.example p {
  /* Make children narrower than their parent,
     so there is room for the box-align */
  width: 200px;
}

<div class="example">
  <p>I will be second from the bottom of div.example, centered horizontally.</p>
  <p>I will be on the bottom of div.example, centered horizontally.</p>
</div>

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

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

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

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