align-items

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-items-Eigenschaft legt den align-self-Wert für alle direkten Elemente innerhalb eines Containers als Gruppe fest. Im Flexbox-Modell steuert sie die Ausrichtung der Elemente entlang der Querachse. Im Grid-Layout steuert sie die Ausrichtung der Elemente entlang der Blockachse innerhalb ihrer Grid-Bereiche.

Probieren Sie es aus

Das interaktive Beispiel unten demonstriert einige der Werte für align-items mithilfe von Grid- und Flex-Layouts.

Syntax

css
/* Basic keywords */
align-items: normal;
align-items: stretch;

/* Positional alignment */
/* align-items does not take left and right values */
align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;
align-items: anchor-center;

/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;

/* Global values */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;

Werte

normal

Die Wirkung dieses Schlüsselworts hängt vom angewandten Layoutmodus ab:

  • In absolut positionierten Layouts verhält sich dieses Schlüsselwort wie start bei ersetzten absolut positionierten Boxen und wie stretch bei allen anderen absolut positionierten Boxen.
  • In der statischen Positionierung von absolut positionierten Layouts verhält sich das Schlüsselwort wie stretch.
  • Für Flex-Elemente verhält sich das Schlüsselwort wie stretch.
  • Für Grid-Elemente führt dieses Schlüsselwort zu einem Verhalten ähnlich stretch, außer bei Boxen mit einem Seitenverhältnis oder einer intrinsischen Größe, wo es sich wie start verhält.
  • Diese Eigenschaft gilt nicht für Boxen auf Blockebene oder für Tabellenzellen.
center

Die Randbereiche der Flex-Elemente werden entlang der Querachse innerhalb der Linie zentriert. Wenn die Quergröße eines Elements größer als die Flex-Container-Größe ist, wird es gleichmäßig in beide Richtungen überlaufen.

start

Die Elemente werden eng gepackt in Richtung der Startkante des Ausrichtungscontainers entlang der entsprechenden Achse.

end

Die Elemente werden eng gepackt in Richtung der Endkante des Ausrichtungscontainers entlang der entsprechenden Achse.

self-start

Die Elemente werden nah an die Startseite des Containers in der entsprechenden Achse gepackt.

self-end

Die Elemente werden nah an die Endseite des Containers in der entsprechenden Achse gepackt.

baseline, first baseline, last baseline

Alle Flex-Elemente werden so ausgerichtet, dass ihre Baseline des Flex-Containers übereinstimmen. Das Element mit dem größten Abstand zwischen seiner Quer-Start-Margin-Kante und seiner Baseline wird mit der Quer-Start-Kante der Linie ausgerichtet.

stretch

Wenn die Elemente kleiner als der Ausrichtungscontainer sind, werden auto-größenangegebene Elemente gleichmäßig vergrößert, um den Container zu füllen, wobei die Breiten- und Höhenbeschränkungen der Elemente berücksichtigt werden.

anchor-center

Bei verankerten Elementen werden die Elemente zentriert in Bezug auf das zugehörige Ankerelement in der Blockrichtung ausgerichtet. Siehe Zentrieren am Anker mit anchor-center.

safe

Wird zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Falls das gewählte Schlüsselwort bedeutet, dass das Element den Ausrichtungscontainer überschreitet, was zu Datenverlust führt, wird das Element stattdessen so ausgerichtet, als wäre der Ausrichtungsmodus start.

unsafe

Wird zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Unabhängig von der relativen Größe des Elements und des Ausrichtungscontainers und ob ein Überlauf zu Datenverlust führen könnte, wird der angegebene Ausrichtungswert beachtet.

Es gibt auch zwei Werte, die für Flexbox definiert wurden, da sie auf Konzepten der Flexmodellachsen basieren und auch in Grid-Layouts funktionieren:

flex-start

Wird nur im Flex-Layout verwendet, richtet die Flex-Elemente an der Haupt-Start- oder Quer-Start-Seite des Containers aus. Außerhalb eines Flex-Layouts verhält sich dieser Wert wie start.

flex-end

Wird nur im Flex-Layout verwendet, richtet die Flex-Elemente an der Haupt-End- oder Quer-End-Seite des Containers aus. Außerhalb eines Flex-Layouts verhält sich dieser Wert wie end.

Formale Definition

Anfangswertnormal
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

align-items = 
normal |
stretch |
<baseline-position> |
[ <overflow-position>? <self-position> ] |
anchor-center

<baseline-position> =
[ first | last ]? &&
baseline

<overflow-position> =
unsafe |
safe

<self-position> =
center |
start |
end |
self-start |
self-end |
flex-start |
flex-end

Beispiele

In diesem Beispiel verwenden wir einen Container mit sechs Kind-Elementen. Ein <select>-Dropdown-Menü ermöglicht das Umschalten des display-Werts des Containers zwischen grid und flex. Ein zweites Menü ermöglicht die Änderung des Werts der align-items-Eigenschaft des Containers.

CSS

Wir stylen den Container und die Elemente so, dass wir zwei Zeilen oder Reihen von Elementen haben. Wir definieren .flex- und .grid-Klassen, welche dem Container mit JavaScript zugewiesen werden. Sie setzen den display-Wert des Containers und ändern dessen Hintergrund- und Rahmenfarben, um einen zusätzlichen Hinweis darauf zu liefern, dass das Layout geändert wurde. Die sechs Flex-Elemente haben jeweils unterschiedliche Hintergrundfarben, wobei das vierte Element zwei Zeilen lang ist und das sechste Element eine vergrößerte Schriftart hat.

css
.flex,
.grid {
  height: 200px;
  width: 500px;
  align-items: initial; /* Change the value in the live sample */
  border: solid 5px transparent;
  gap: 3px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  background-color: #8c8c9f;
  border-color: magenta;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  background-color: #9f8c8c;
  border-color: slateblue;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

HTML

Wir fügen einen <div>-Container mit sechs verschachtelten <div>-Kind-Elementen ein. Der HTML-Code für das Formular und das JavaScript, das die Klasse des Containers ändert, wurde aus Gründen der Kürze weggelassen.

html
<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4<br />line 2</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

Ergebnis

Spezifikationen

Specification
CSS Box Alignment Module Level 3
# align-items-property
CSS Flexible Box Layout Module Level 1
# align-items-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-items
anchor-center
Experimental
Supported in Flex Layout
flex_context.baseline
first baseline
last baseline
safe and unsafe
start and end
Supported in Grid Layout
start and end

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch