---
title: '-moz-box-pack'
slug: Web/CSS/box-pack
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Referenz
  - Layout
  - Non-standard
translation_of: Web/CSS/box-pack
original_slug: Web/CSS/-moz-box-pack
---
<div>{{CSSRef}}{{warning("Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Layout Moduls, welches durch einen neuen Standard ersetzt wurde.")}}</div>

<p>Siehe <a href="/de/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a> für mehr Informationen.</p>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>-moz-box-pack</code> und <code>-webkit-box-pack</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaften bestimmen, wie ein <code>-moz-box</code> oder <code>-webkit-box</code> seine Inhalte in Richtung seines Layouts packt.  Die Wirkung dieser Eigenschaft ist nur sichtbar, falls es zusätzlichen Leerraum innerhalb der Box gibt. Siehe <a href="/de/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a> für mehr Informationen bezüglich den Eigenschaften von Flexbox-Elementen.</p>

<p>Die Richtung des Layouts hängt von der Ausrichtung des Elements ab: horizontal oder vertikal.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">/* Schlüsselwortwerte */
-moz-box-pack: start;
-moz-box-pack: center;
-moz-box-pack: end;
-moz-box-pack: justify;

/* Globale Werte */
-moz-box-pack: inherit;
-moz-box-pack: initial;
-moz-box-pack: unset;
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>start</code></dt>
 <dd>Die Box packt Inhalte am Anfang und lässt eventuellen zusätzlichen Leerraum am Ende.</dd>
 <dt><code>center</code></dt>
 <dd>Die Box packt Inhalte in der Mitte und teilt eventuellen zusätzlichen Leerraum zwischen Start und Ende auf.</dd>
 <dt><code>end</code></dt>
 <dd>Die Box packt Inhalte am Ende und lässt eventuellen zusätzlichen Leerraum am Start.</dd>
 <dt><code>justify</code></dt>
 <dd>Der Leerraum wird gleichmäßig zwischen jedem Kind aufgeteilt, wobei kein zusätzlicher Leerraum vor dem ersten Kind oder nach dem letzten Kind platziert wird. Falls es nur ein Kind gibt, wird der Wert so behandelt, als ob er <code>start</code> wäre.</dd>
</dl>

<h3 id="Formale_Syntax">Formale Syntax</h3>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<pre class="brush: css">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;
}
</pre>

<pre class="brush: html">&lt;div class="example"&gt;
  &lt;p&gt;I will be second from the bottom of div.example, centered horizontally.&lt;/p&gt;
  &lt;p&gt;I will be on the bottom of div.example, centered horizontally.&lt;/p&gt;
&lt;/div&gt;
</pre>

<p>{{EmbedLiveSample('Beispiele', 310, 310)}}</p>

<h2 id="Hinweise">Hinweise</h2>

<p>Der Rand der Box, die als <em>Start</em> zum Packen bestimmt wird, hängt von der Ausrichtung der Box und deren Richtung ab:</p>

<table class="standard-table" style="text-align: center;">
 <tbody>
  <tr>
   <th> </th>
   <th><strong>Normal</strong></th>
   <th><strong>Umgekehrt</strong></th>
  </tr>
  <tr>
   <th style="text-align: right;"><strong>Horizontal</strong></th>
   <td>links</td>
   <td>rechts</td>
  </tr>
  <tr>
   <th style="text-align: right;"><strong>Vertikal</strong></th>
   <td>oben</td>
   <td>unten</td>
  </tr>
 </tbody>
</table>

<p>Der dem Start gegenüberliegende Rand wird als das <em>Ende</em> bestimmt.</p>

<p>Falls das Packen durch das <code>pack</code> Elementattribut gesetzt wird, wird die Stileigenschaft ignoriert.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<p>Diese Eigenschaft ist nicht standardisiert, jedoch erschien eine ähnliche Eigenschaft in einem <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">frühen Entwurf von CSS3 Flexbox</a>, die durch neuere Versionen der Spezifikation überholt wurde.</p>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

{{Compat("css.properties.box-pack")}}

<h2 id="Siehe_auch">Siehe auch</h2>

<p>{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}</p>