-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.

Initialwertstart
Anwendbar aufElemente mit einem CSS display Wert von -moz-box, -moz-inline-box, -webkit-box oder -webkit-inline-box
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
AnimierbarNein
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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:

  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

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung Nicht unterstützt (Ja) Nicht unterstützt Nicht unterstützt Nicht unterstützt
Merkmal Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung Nicht unterstützt Nicht unterstützt (Ja) Nicht unterstützt Nicht unterstützt Nicht unterstützt

Siehe auch

box-orient, box-direction, box-align

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz
 Zuletzt aktualisiert von: Sebastianz,