box-pack CSS property
Deprecated
Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Warnung: Dies ist eine Eigenschaft des ursprünglichen Entwurfs des flexiblen Box-Layout-Moduls von CSS, die durch einen neueren Standard ersetzt wurde. Siehe Flexbox für Informationen über den aktuellen Standard.
Die -moz-box-pack- und -webkit-box-pack CSS Eigenschaften geben an, wie eine -moz-box oder -webkit-box ihren Inhalt in Richtung ihres Layouts packt. Der Effekt dieser Eigenschaft ist nur zu sehen, wenn in der Box zusätzlicher Platz vorhanden ist.
Die Richtung des Layouts hängt von der Ausrichtung des Elements ab: horizontal oder vertikal.
Syntax
/* 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;
Werte
Diese Eigenschaft wird mit einem der folgenden Schlüsselwortwerte angegeben:
start-
Die Box packt den Inhalt am Anfang, sodass zusätzlicher Platz am Ende bleibt.
center-
Die Box packt den Inhalt in der Mitte, wobei der zusätzliche Platz gleichmäßig zwischen Anfang und Ende verteilt wird.
end-
Die Box packt den Inhalt am Ende, sodass zusätzlicher Platz am Anfang bleibt.
justify-
Der Platz wird gleichmäßig zwischen den einzelnen Kindern aufgeteilt, ohne dass zusätzlicher Platz vor dem ersten oder nach dem letzten Kind platziert wird. Wenn es nur ein Kind gibt, wird der Wert so behandelt, als ob es
startwäre.
Hinweise
Der Rand der Box, der für Packzwecke als Anfang bezeichnet wird, hängt von der Ausrichtung und Richtung der Box ab:
- Für horizontale Elemente ist der Anfang die obere Kante.
- Für vertikale Elemente ist der Anfang die linke Kante.
| Normal | Umgekehrt | |
|---|---|---|
| Horizontal | links | rechts |
| Vertikal | oben | unten |
Der gegenüberliegende Rand des Anfangs wird als Ende bezeichnet.
Wenn das Packen mit dem pack-Attribut eines Elements gesetzt wird, wird der Stil ignoriert.
Formale Definition
| Anfangswert | start |
|---|---|
| Anwendbar auf | Elemente mit einem CSS display Wert von -moz-box, -moz-inline-box, -webkit-box oder -webkit-inline-box |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
box-pack =
start |
center |
end |
justify
Beispiele
Beispiele für 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>
Spezifikationen
Nicht Teil eines Standards.