align-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.
* Some parts of this feature may have varying levels of support.
Die CSS align-content
Eigenschaft legt die Verteilung des Raums zwischen und um Inhaltselemente entlang der Querachse eines Flexbox-Layouts oder der Blockachse eines Grid- oder Block-Level-Elements fest.
Das interaktive Beispiel unten verwendet Grid-Layout, um einige der Werte dieser Eigenschaft zu demonstrieren.
Probieren Sie es aus
Diese Eigenschaft hat keine Auswirkung auf einzeilige Flexbox-Container (d. h. Container mit flex-wrap: nowrap
).
Syntax
/* Normal alignment */
align-content: normal;
/* Basic positional alignment */
/* align-content does not take left and right values */
align-content: start;
align-content: center;
align-content: end;
align-content: flex-start;
align-content: flex-end;
/* Baseline alignment */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;
/* Distributed alignment */
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: stretch;
/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;
/* Global values */
align-content: inherit;
align-content: initial;
align-content: revert;
align-content: revert-layer;
align-content: unset;
Werte
normal
-
Die Elemente werden in ihrer Standardposition angeordnet, als ob kein
align-content
-Wert festgelegt wäre. start
-
Die Elemente sind bündig aneinander gegen den Start-Rand des Ausrichtungscontainers auf der Querachse ausgerichtet.
center
-
Die Elemente sind bündig aneinander in der Mitte des Ausrichtungscontainers entlang der Querachse ausgerichtet.
end
-
Die Elemente sind bündig aneinander gegen den End-Rand des Ausrichtungscontainers auf der Querachse ausgerichtet.
flex-start
-
Die Elemente sind bündig aneinander gegen den Rand des Ausrichtungscontainers je nach der Start-Seite der Querachse des Flexbox-Containers ausgerichtet. Dies gilt nur für Flexbox-Layout-Elemente. Für Elemente, die keine Kinder eines Flexbox-Containers sind, wird dieser Wert wie
start
behandelt. flex-end
-
Die Elemente sind bündig aneinander gegen den Rand des Ausrichtungscontainers je nach der End-Seite der Querachse des Flexbox-Containers ausgerichtet. Dies gilt nur für Flexbox-Layout-Elemente. Für Elemente, die keine Kinder eines Flexbox-Containers sind, wird dieser Wert wie
end
behandelt. baseline
,first baseline
,last baseline
-
Gibt die Teilnahme an der Ausrichtung der ersten oder letzten Basislinie an: Richten Sie die Ausrichtungsbasislinie des ersten oder letzten Basissatzes der Box mit der entsprechenden Basislinie in dem gemeinsamen ersten oder letzten Basissatz aller Boxen in ihrer Basislinien-Gruppe aus.
Die Fallback-Ausrichtung für
first baseline
iststart
, die fürlast baseline
istend
. space-between
-
Die Elemente sind entlang der Querachse gleichmäßig innerhalb des Ausrichtungscontainers verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist gleich. Das erste Element ist bündig mit dem Start-Rand des Ausrichtungscontainers auf der Querachse, und das letzte Element ist bündig mit dem End-Rand des Ausrichtungscontainers auf der Querachse.
space-around
-
Die Elemente sind entlang der Querachse 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 entspricht der Hälfte des Abstands zwischen jedem Paar benachbarter Elemente.
space-evenly
-
Die Elemente sind entlang der Querachse gleichmäßig innerhalb des Ausrichtungscontainers verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente, dem Start-Rand und dem ersten Element sowie dem End-Rand und dem letzten Element ist exakt gleich.
stretch
-
Wenn die kombinierte Größe der Elemente entlang der Querachse kleiner ist als die Größe des Ausrichtungscontainers, werden alle
auto
-größengebundenen Elemente gleichmäßig (nicht proportional) vergrößert, unter Beachtung von Einschränkungen durchmax-height
/max-width
(oder entsprechende Funktionalitäten), sodass die kombinierte Größe genau die Querachse des Ausrichtungscontainers ausfüllt. safe
-
Wird zusammen mit einem Ausrichtungsschlüsselwort verwendet. Falls 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 Ausrichtungsschlüsselwort verwendet. Unabhängig von den relativen Größen des Elements und des Ausrichtungscontainers und davon, ob ein Überlauf, der Datenverlust verursachen könnte, stattfindet, wird der angegebene Ausrichtungswert beachtet.
Hinweis:
Die <content-distribution>
-Werte (space-between
, space-around
, space-evenly
und stretch
) haben keine Auswirkung im Block-Layout, da der gesamte Inhalt in diesem Block als ein einzelnes Alignment-Subject behandelt wird.
Formale Definition
Anfangswert | normal |
---|---|
Anwendbar auf | Block-containers, multi-column containers, flex containers |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
align-content =
normal |
<baseline-position> |
<content-distribution> |
<overflow-position>? <content-position>
<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
Auswirkungen verschiedener align-content-Werte
In diesem Beispiel können Sie zwischen drei verschiedenen display
-Eigenschaftswerten wechseln, einschließlich flex
, grid
und block
. Sie können auch zwischen den verschiedenen Werten für align-content
wechseln.
HTML
<section>
<div class="olive">Olive</div>
<div class="coral">Coral</div>
<div class="deepskyblue">Deep<br />sky<br />blue</div>
<div class="orchid">Orchid</div>
<div class="slateblue">Slateblue</div>
<div class="maroon">Maroon</div>
</section>
CSS
section {
border: solid 1.5px tomato;
height: 300px;
width: 300px;
flex-wrap: wrap; /* used by flex only */
gap: 0.2rem; /* not used by block */
}
.olive {
background-color: olive;
}
.coral {
background-color: coral;
}
.deepskyblue {
background-color: deepskyblue;
}
.orchid {
background-color: orchid;
}
.slateblue {
background-color: slateblue;
color: white;
}
.maroon {
background-color: maroon;
color: white;
}
Ergebnis
Versuchen Sie, die Werte von display
und align-content
zu ändern.
Im Block-Layout werden die untergeordneten Elemente als ein einzelnes Element behandelt, was bedeutet, dass sich space-between
, space-around
und space-evenly
anders verhalten.
Spezifikationen
Specification |
---|
CSS Box Alignment Module Level 3 # align-justify-content |
CSS Flexible Box Layout Module Level 1 # align-content-property |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
align-content | ||||||||||||
Supported in Block Layout | ||||||||||||
Supported in Flex Layout | ||||||||||||
flex_context.baseline | ||||||||||||
first baseline | ||||||||||||
last baseline | ||||||||||||
safe and unsafe | ||||||||||||
flex_context.space-evenly | ||||||||||||
start and end | ||||||||||||
flex_context.stretch | ||||||||||||
Supported in Grid Layout | ||||||||||||
Supported in Multi-column Layout |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.