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

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

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

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

Значения

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

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

Примечания

Край блока, считающийся началом при размещении, зависит от ориентации и направления блока:

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

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

Край, противоположный началу, считается концом.

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

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

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

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

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	WebView на iOS
`box-pack`	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-pack