-moz-box-pack

Achtung: Dies ist eine Eigenschaft des urspr├╝nglichen CSS Flexible Box Layout Moduls, welches durch einen neuen Standard ersetzt wurde.

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.

Wert nicht in der DB gefunden!

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

Syntax nicht in der Datenbank gefunden!

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:

  Normal Umgekehrt
Horizontal links rechts
Vertikal oben unten

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

BCD tables only load in the browser

Siehe auch