-moz-box-pack

Siehe Flexbox für mehr Informationen.

Übersicht

Die -moz-box-pack und -webkit-box-pack CSS Eigenschaften bestimmen, wie ein -moz-box oder -webkit-box seine Inhalte in Richtung seines Layouts packt.  Die Wirkung dieser Eigenschaft ist nur sichtbar, falls es zusätzlichen Leerraum innerhalb der Box gibt. Siehe Flexbox für mehr Informationen bezüglich den Eigenschaften von Flexbox-Elementen.

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

Syntax

/* 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;

Werte

start

Die Box packt Inhalte am Anfang und lässt eventuellen zusätzlichen Leerraum am Ende.

center

Die Box packt Inhalte in der Mitte und teilt eventuellen zusätzlichen Leerraum zwischen Start und Ende auf.

end

Die Box packt Inhalte am Ende und lässt eventuellen zusätzlichen Leerraum am Start.

justify

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 start wäre.

Formale Syntax

start | center | end | justify

Beispiele

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>

Hinweise

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

Der dem Start gegenüberliegende Rand wird als das Ende bestimmt.

Falls das Packen durch das pack Elementattribut gesetzt wird, wird die Stileigenschaft ignoriert.

Spezifikationen

Diese Eigenschaft ist nicht standardisiert, jedoch erschien eine ähnliche Eigenschaft in einem frühen Entwurf von CSS3 Flexbox, die durch neuere Versionen der Spezifikation überholt wurde.

Browser Kompatibilität

Siehe auch

box-orient, box-direction, box-align