place-content
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Die place-content
-CSS-Kurzschrift-Eigenschaft ermöglicht es Ihnen, Inhalte sowohl in Block- als auch in Inline-Richtung gleichzeitig auszurichten (d.h. die Eigenschaften align-content
und justify-content
) in einem relevanten Layout-System wie Grid oder Flexbox.
Probieren Sie es aus
Zugehörige Eigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
/* Positional alignment */
/* align-content does not take left and right values */
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;
/* Baseline alignment */
/* justify-content does not take baseline values */
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;
/* Distributed alignment */
place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;
/* Global values */
place-content: inherit;
place-content: initial;
place-content: revert;
place-content: revert-layer;
place-content: unset;
Der erste Wert ist der Wert der Eigenschaft align-content
, der zweite der von justify-content
.
Hinweis: Wenn der zweite Wert nicht vorhanden ist, wird der erste Wert für beide verwendet, vorausgesetzt, er ist ein gültiger Wert für beide. Wenn er für eine der beiden Eigenschaften ungültig ist, wird der gesamte Wert ungültig sein.
Werte
start
-
Die Elemente werden eng aneinander an der Startkante des Ausrichtungscontainers in der entsprechenden Achse ausgerichtet.
end
-
Die Elemente werden eng aneinander an der Endkante des Ausrichtungscontainers in der entsprechenden Achse ausgerichtet.
flex-start
-
Die Elemente werden eng aneinander an der Kante des Ausrichtungscontainers je nach Hauptanfangs- oder Queranfangsseite des Flex-Containers ausgerichtet. Dies gilt nur für Elemente in einem Flex-Layout. Für Elemente, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie
start
behandelt. flex-end
-
Die Elemente werden eng aneinander an der Kante des Ausrichtungscontainers je nach Hauptend- oder Querendseite des Flex-Containers ausgerichtet. Dies gilt nur für Elemente in einem Flex-Layout. Für Elemente, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie
end
behandelt. center
-
Die Elemente werden eng aneinander in der Mitte des Ausrichtungscontainers ausgerichtet.
left
-
Die Elemente werden eng aneinander an der linken Kante des Ausrichtungscontainers ausgerichtet. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie
start
. right
-
Die Elemente werden eng aneinander an der rechten Kante des Ausrichtungscontainers in der entsprechenden Achse ausgerichtet. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie
start
. space-between
-
Die Elemente werden gleichmäßig innerhalb des Ausrichtungscontainers verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist gleich. Das erste Element liegt bündig mit der Hauptanfangskante, und das letzte Element liegt bündig mit der Hauptendkante.
baseline
,first baseline
,last baseline
-
Gibt die Teilnahme an der ersten oder letzten Basislinienausrichtung an: richtet die Ausrichtungsbasislinie des ersten oder letzten Basisliniensatzes der Box mit der entsprechenden Basislinie im gemeinsamen ersten oder letzten Basisliniensatz aller Boxen in ihrer Basislinien-Sharing-Gruppe aus. Die Ersatz-Ausrichtung für
first baseline
iststart
, die fürlast baseline
istend
. space-around
-
Die Elemente werden gleichmäßig innerhalb des Ausrichtungscontainers verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist gleich. Der Leerraum vor dem ersten und nach dem letzten Element ist halb so groß wie der Abstand zwischen jedem Paar benachbarter Elemente.
space-evenly
-
Die Elemente werden gleichmäßig innerhalb des Ausrichtungscontainers verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente, der Hauptanfangskante und dem ersten Element sowie der Hauptendkante und dem letzten Element ist genau gleich.
stretch
-
Wenn die kombinierte Größe der Elemente kleiner ist als die Größe des Ausrichtungscontainers, wird die Größe von
auto
-Größe-Elementen gleichmäßig (nicht proportional) erhöht, unter Beachtung der durchmax-height
/max-width
(oder gleichwertige Funktionalität) auferlegten Einschränkungen, sodass die kombinierte Größe den Ausrichtungscontainer genau ausfüllt. safe
-
Wird zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Wenn das gewählte Schlüsselwort dazu führt, dass das Element den Ausrichtungscontainer überläuft und Datenverlust verursacht, wird das Element stattdessen so ausgerichtet, als wäre der Ausrichtungsmodus
start
. unsafe
-
Wird zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Unabhängig von den relativen Größen des Elements und des Ausrichtungscontainers und unabhängig davon, ob ein Überlauf, der Datenverlust verursacht, auftreten könnte, wird der angegebene Ausrichtungswert eingehalten.
Formale Definition
Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | mehrzeilige flexible Container |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | diskret |
Formale Syntax
place-content =
<'align-content'> <'justify-content'>?
<align-content> =
normal |
<baseline-position> |
<content-distribution> |
<overflow-position>? <content-position>
<justify-content> =
normal |
<content-distribution> |
<overflow-position>? [ <content-position> | left | right ]
<baseline-position> =
[ first | last ]? &&
baseline
<content-distribution> =
space-between |
space-around |
space-evenly |
stretch
<overflow-position> =
unsafe |
safe
<content-position> =
center |
start |
end |
flex-start |
flex-end
Beispiele
Platzierung von Inhalten in einem Flex-Container
HTML
<div id="container">
<div class="small">Lorem</div>
<div class="small">Lorem<br />ipsum</div>
<div class="large">Lorem</div>
<div class="large">Lorem<br />ipsum</div>
<div class="large"></div>
<div class="large"></div>
</div>
CSS
#container {
display: flex;
height: 240px;
width: 240px;
flex-wrap: wrap;
background-color: #8c8c8c;
writing-mode: horizontal-tb; /* Can be changed in the live sample */
direction: ltr; /* Can be changed in the live sample */
place-content: flex-end center; /* Can be changed in the live sample */
}
div > div {
border: 2px solid #8c8c8c;
width: 50px;
background-color: #a0c8ff;
}
.small {
font-size: 12px;
height: 40px;
}
.large {
font-size: 14px;
height: 50px;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Box Alignment Module Level 3 # place-content |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
place-content | ||||||||||||
Supported in Flex Layout | ||||||||||||
Supported in Grid Layout |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.