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

css
/* 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 Basislinie ist die Linie, auf der die meisten Buchstaben „sitzen“ und unter der sich Absenkungen erstrecken.

Die Fallback-Ausrichtung für first baseline ist start, die für last baseline ist end.

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 durch max-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

Anfangswertnormal
Anwendbar aufBlock-containers, multi-column containers, flex containers
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

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

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

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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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.

Siehe auch