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 align-self Wert auf alle direkten Kinder als eine Gruppe. In flexbox steuert es die Ausrichtung von Elementen auf der Querachse. Im Grid-Layout steuert es die Ausrichtung von Elementen 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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Das interaktive Beispiel unten zeigt einige der Werte für align-items unter Verwendung von 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 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-Items verhält sich das Schlüsselwort wie stretch.
Für Grid-Items führt dieses Schlüsselwort zu einem Verhalten ähnlich dem von stretch, außer bei Boxen mit einem Seitenverhältnis oder einer intrinsischen Größe, bei denen es sich wie start verhält.
Die Eigenschaft gilt nicht für Blockboxen und Tabellzellen.

center

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

start

Die Elemente werden aneinander gepackt und richten sich zur Startkante des Ausrichtungskontainers in der entsprechenden Achse aus.

end

Die Elemente werden aneinander gepackt und richten sich zur Endkante des Ausrichtungskontainers in der entsprechenden Achse aus.

self-start

Die Elemente werden bündig zur Kante auf der Startseite des Items des Ausrichtungskontainers in der entsprechenden Achse angeordnet.

self-end

Die Elemente werden bündig zur Kante auf der Endseite des Items des Ausrichtungskontainers in der entsprechenden Achse angeordnet.

baseline, first baseline, last baseline

Alle Flex-Items sind so ausgerichtet, dass ihre Flex-Container-Baselines ausgerichtet sind. Das Item mit der größten Entfernung zwischen seiner Quer-Start-Margin-Kante und seiner Baseline wird mit der Quer-Start-Kante der Linie bündig gemacht.

stretch

Wenn die Quergröße des Elements auto ist, wird die verwendete Größe auf die Länge festgelegt, die notwendig ist, um möglichst den Container zu füllen, unter Beachtung der Breiten- und Höhenbeschränkungen 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 der Container's align-content first baseline (oder baseline) oder last baseline ist.

anchor-center

Im Fall von ankerpositionierten Elementen, richtet die Elemente auf die Mitte des zugehörigen Ankerelements in Blockrichtung aus. Siehe Zentrieren auf den Anker mit anchor-center.

safe

Wird zusammen mit einem Ausrichtungsschlüsselwort verwendet. Wenn das gewählte Schlüsselwort bedeutet, dass das Element den Ausrichtungskontainer überläuft und Datenverlust verursacht, wird das Element stattdessen ausgerichtet, als ob der Ausrichtungsmodus start wäre.

unsafe

Wird zusammen mit einem Ausrichtungsschlüsselwort verwendet. Unabhängig von den relativen Größen des Elements und des Ausrichtungskontainers und ob Überlauf, der zu Datenverlust führen könnte, auftritt oder nicht, wird der angegebene Ausrichtungswert eingehalten.

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

flex-start: Wird nur im Flex-Layout verwendet, richtet die Flex-Items bündig an der Hauptstart- oder Querstartseite des Flex-Containers aus. Wenn es außerhalb eines Flex-Formatierungskontexts verwendet wird, verhält sich dieser Wert wie start.
flex-end: Wird nur im Flex-Layout verwendet, richtet die Flex-Items bündig an der Hauptend- oder Querendseite des Flex-Containers aus. Wenn es außerhalb eines Flex-Formatierungskontexts verwendet wird, 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 es, das display des Containers zwischen grid und flex umzuschalten. Ein zweites Menü ermöglicht es, den Wert der align-items Eigenschaft des Containers zu ändern.

CSS

Wir stylen den Container und die Elemente so, dass wir zwei Zeilen oder Reihen von Elementen haben. Wir haben .flex und .grid Klassen definiert, die mit JavaScript auf den Container angewendet werden. Diese setzen den display Wert des Containers und ändern seine Hintergrund- und Rahmenfarben als zusätzlichen Hinweis darauf, dass sich das Layout geändert hat. Die sechs Flex-Items haben jeweils eine andere Hintergrundfarbe, wobei das 4. Element zwei Zeilen 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 fügen einen Container <div> mit sechs verschachtelten <div> Kindern ein. Der HTML-Code für das Formular und das JavaScript, das die Klasse des Containers ändert, wurde der Übersichtlichkeit halber 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>

<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 Abkürzung
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

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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