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 setzt den Wert von align-self auf alle direkten Kinder als Gruppe. In Flexbox steuert es die Ausrichtung der Elemente auf der Querachse. Im Rasterlayout kontrolliert es die Ausrichtung der Elemente auf der Blockachse innerhalb ihrer Rasterbereiche.

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: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

Das interaktive Beispiel unten zeigt einige der Werte für align-items mit Grid- und Flex-Layout.

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 Layoutmodus ab, in dem wir uns befinden:

In absolut positionierten Layouts verhält sich das Schlüsselwort wie start für ersetzte absolut positionierte Boxen und wie stretch für alle anderen absolut positionierten Boxen.
In der statischen Position von absolut positionierten Layouts verhält sich das Schlüsselwort wie stretch.
Bei Flex-Elementen verhält sich das Schlüsselwort wie stretch.
Bei Gitternetz-Elementen führt dieses Schlüsselwort zu einem Verhalten, das dem von stretch ähnelt, außer bei Boxen mit einem Seitenverhältnis oder einer intrinsischen Größe, wo es sich wie start verhält.
Die Eigenschaft gilt nicht für Blockebenen-Boxen und Tabellenzellen.

center

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

start

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

end

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

self-start

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

self-end

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

baseline, first baseline, last baseline

Alle Flex-Elemente sind so ausgerichtet, dass ihre Flex-Container-Grundlinien übereinstimmen. Das Element mit dem größten Abstand zwischen seiner Quer-Start-Margin-Kante und seiner Grundlinie ist bündig mit der Quer-Start-Kante der Linie.

stretch

Wenn die Elemente kleiner als der Ausrichtungscontainer sind, werden automatisch dimensionierte Elemente gleichermaßen vergrößert, um den Container zu füllen, und respektieren dabei die Breiten- und Höhenbegrenzungen der Elemente.

anchor-center

Im Fall von ankerpositionierten Elementen, richtet die Elemente zum Zentrum des zugehörigen Ankerelements in der Blockrichtung aus. Siehe Zentrierung am Anker mit anchor-center.

safe

Zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Falls das gewählte Schlüsselwort bedeutet, dass das Element den Ausrichtungscontainer überflutet und Datenverlust verursacht, wird das Element stattdessen ausgerichtet, als wäre der Ausrichtungsmodus start.

unsafe

Zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Ungeachtet der relativen Größen des Elements und des Ausrichtungscontainers und ob ein Überlaufen, das möglicherweise Datenverlust verursacht, passieren könnte, wird der gegebene Ausrichtungswert berücksichtigt.

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

flex-start: Nur im Flex-Layout verwendet, richtet die Flex-Elemente bündig zur Haupt-Start- oder Quer-Startseite des Flex-Containers aus. Beim Einsatz außerhalb eines Flex-Formatierungskontexts verhält sich dieser Wert wie start.
flex-end: Nur im Flex-Layout verwendet, richtet die Flex-Elemente bündig zur Haupt-End- oder Quer-Endseite des Flex-Containers aus. Beim Einsatz außerhalb eines Flex-Formatierungskontexts 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> ]  |
  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 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 definierten .flex und .grid Klassen, die mit JavaScript auf den Container angewendet werden. Sie setzen den display Wert des Containers und ändern seine Hintergrund- und Randfarben, die einen zusätzlichen Indikator dafür bieten, dass das Layout geändert wurde. Die sechs Flex-Elemente haben jeweils eine andere Hintergrundfarbe, wobei das 4. Element zwei Zeilen lang ist und das 6. 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;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

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

HTML

Wir fügen einen Container <div> mit sechs geschachtelten <div> Kindern hinzu. Das HTML für das Formular und das JavaScript, das die Klasse des Containers ändert, wurde der Kürze halber ausgeblendet.

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

Specification
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
Elemente in einem Flex-Container ausrichten
Box-Ausrichtung im Rasterlayout
CSS-Box-Ausrichtung Modul
CSS Flexibles Box-Layout Modul
CSS Rasterlayout Modul