`align-items` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die CSS align-items-Eigenschaft setzt den align-self-Wert für alle direkten Kinder als Gruppe. Im Flexbox-Layout steuert sie die Ausrichtung der Elemente auf der Querachse. Im Grid-Layout steuert sie die Ausrichtung der Elemente auf der Blockachse innerhalb ihrer Rasterbereiche.

Das interaktive Beispiel unten verwendet ein Grid-Layout, um einige der Werte dieser Eigenschaft zu demonstrieren.

Probieren Sie es aus

align-items: stretch;

align-items: center;

align-items: start;

align-items: end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 200px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

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

Diese Eigenschaft kann mit einem oder zwei der folgenden Schlüsselwortwerte angegeben werden:

normal

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

In absolut positionierten Layouts verhält sich das Schlüsselwort wie start bei ersetzten absolut positionierten Boxen und wie stretch bei allen anderen absolut positionierten Boxen.
In der statischen Position 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 für Boxen mit einem Seitenverhältnis oder einer intrinsischen Größe, wo es sich wie start verhält.
Die Eigenschaft gilt nicht für Block-Level-Boxen und Tabellenelemente.

center

Die Margin-Boxen der Flex-Elemente sind innerhalb der Linie auf der Querachse zentriert. Wenn die Querschnittsgröße eines Elements größer ist als der Flex-Container, läuft es in beide Richtungen gleichmäßig über.

start

Die Elemente sind bündig zueinander in Richtung der Startkante des Ausrichtungscontainers auf der entsprechenden Achse gepackt.

end

Die Elemente sind bündig zueinander in Richtung der Endkante des Ausrichtungscontainers auf der entsprechenden Achse gepackt.

self-start

Die Elemente sind bündig zur Kante der Startseite des Ausrichtungscontainers des Elements gepackt, auf der entsprechenden Achse.

self-end

Die Elemente sind bündig zur Kante der Endseite des Ausrichtungscontainers des Elements gepackt, auf der entsprechenden Achse.

baseline, first baseline, last baseline

Alle Flex-Elemente sind so ausgerichtet, dass ihre Flex-Container-Baselines ausgerichtet sind. Das Element mit dem größten Abstand zwischen seiner Querstart-Margin-Kante und seiner Baseline ist mit der Querstartkante der Linie bündig.

stretch

Wenn die Querschnittsgröße des Elements auto ist, wird die verwendete Größe auf die Länge gesetzt, die erforderlich ist, um den Container so weit wie möglich zu füllen, unter Berücksichtigung der Breiten- und Höhenlimits des Elements. Wenn das Element nicht automatisch dimensioniert ist, fällt dieser Wert auf flex-start zurück und auf self-start oder self-end, wenn align-content des Containers first baseline (oder baseline) oder last baseline ist.

anchor-center

Bei Anker-positionierten Elementen richtet es die Elemente in der Blockrichtung zur Mitte des zugehörigen Ankerelements aus. Siehe Zentrieren auf dem Anker mit anchor-center.

safe

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

unsafe

Wird zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Unabhängig von den relativen Größen des Elements und des Ausrichtungscontainers und ob ein Überlauf, der Datenverlust verursacht, auftreten könnte, wird der gegebene Ausrichtungswert beibehalten.

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

flex-start: Wird nur im Flex-Layout verwendet, richtet die Flex-Elemente bündig zur Hauptstart- oder Querstart-Seite des Flex-Containers aus. Wenn außerhalb eines flexiblen Formatierungskontexts verwendet, verhält sich dieser Wert wie start.
flex-end: Wird nur im Flex-Layout verwendet, richtet die Flex-Elemente bündig zur Hauptend- oder Querend-Seite des Flex-Containers aus. Wenn außerhalb eines flexiblen Formatierungskontexts verwendet, verhält sich dieser Wert wie end.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

align-items = 
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  

<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 haben wir einen Container mit sechs Kindern. Ein <select>-Dropdown-Menü ermöglicht das Umschalten des display des Containers zwischen grid und flex. Ein zweites Menü ermöglicht das Ändern des Werts der align-items-Eigenschaft des Containers.

CSS

Wir gestalten den Container und die Elemente so, dass wir zwei Linien oder Reihen von Elementen haben. Wir haben .flex- und .grid-Klassen definiert, die mit JavaScript auf den Container angewendet werden. Sie setzen den display-Wert des Containers und ändern seine Hintergrund- und Randfarben, um einen zusätzlichen Indikator dafür zu bieten, dass sich das Layout geändert hat. Die sechs Flex-Elemente haben jeweils eine andere Hintergrundfarbe, wobei das 4. Element zwei Linien lang ist und das 6. Element eine vergrößerte Schrift 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;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

div > div {
  box-sizing: border-box;
  border: 2px solid white;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML

Wir schließen einen Container <div> mit sechs verschachtelten <div>-Kindern ein. Das HTML für das Formular und das JavaScript, das die Klasse des Containers ändert, wurde der Kürze halber versteckt.

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>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-items: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>

    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

const values = document.getElementById("values");
const display = document.getElementById("display");
const container = document.getElementById("container");

values.addEventListener("change", (evt) => {
  container.style.alignItems = evt.target.value;
});

display.addEventListener("change", (evt) => {
  container.className = evt.target.value;
});

Ergebnis

Spezifikationen

Spezifikation
CSS Box Alignment Module Level 3 # align-items-property
CSS Flexible Box Layout Module Level 1 # align-items-property

Browser-Kompatibilität

Siehe auch

align-self
align-content
justify-items
place-items Kurzform
Grundkonzepte von Flexbox
Ausrichten von Elementen in einem Flex-Container
Box-Ausrichtung im Grid-Layout
CSS Box-Ausrichtung Modul
CSS Flexibles Box-Layout Modul
CSS Grid-Layout Modul

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

align-items CSS property

Help improve MDN

`align-items` CSS property