align-items CSS property

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

/* 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 wird mit einem oder zwei der folgenden Schlüsselwortwerte angegeben:

normal

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

• In Layouts mit absoluter Positionierung verhält sich das Schlüsselwort bei absolut positionierten ersetzten Boxen wie start und bei allen anderen absolut positionierten Boxen wie stretch.
• Bei der statischen Position in Layouts mit absoluter Positionierung verhält sich das Schlüsselwort wie stretch.
• Bei Flex-Elementen verhält sich das Schlüsselwort wie stretch.
• Bei Grid-Elementen führt dieses Schlüsselwort zu einem ähnlichen Verhalten wie stretch. Bei Boxen mit einem Seitenverhältnis oder einer intrinsischen Größe verhält es sich jedoch wie start.
• Die Eigenschaft gilt weder für Boxen auf Blockebene noch für Tabellenzellen.

center

Die Margin-Boxen der Flex-Elemente werden innerhalb der Zeile auf der Querachse zentriert. Ist die Größe eines Elements auf der Querachse größer als die des Flex-Containers, ragt es in beide Richtungen gleich weit über.

start

Die Elemente werden aneinanderliegend zur Anfangskante des Ausrichtungscontainers auf der jeweiligen Achse hin angeordnet.

end

Die Elemente werden aneinanderliegend zur Endkante des Ausrichtungscontainers auf der jeweiligen Achse hin angeordnet.

self-start

Die Elemente werden bündig an der Kante des Ausrichtungscontainers angeordnet, die auf der jeweiligen Achse der Anfangsseite des Elements entspricht.

self-end

Die Elemente werden bündig an der Kante des Ausrichtungscontainers angeordnet, die auf der jeweiligen Achse der Endseite des Elements entspricht.

baseline, first baseline, last baseline

Alle Flex-Elemente werden so ausgerichtet, dass ihre Basislinien im Flex-Container übereinstimmen. Das Element mit dem größten Abstand zwischen seiner Margin-Kante am Anfang der Querachse und seiner Basislinie wird bündig an der Anfangskante der Zeile auf der Querachse ausgerichtet.

stretch

Ist die Größe des Elements auf der Querachse auto, wird die verwendete Größe auf die Länge festgelegt, die den Container unter Berücksichtigung der Breiten- und Höhenbeschränkungen des Elements möglichst vollständig ausfüllt. Hat das Element keine automatische Größe, fällt dieser Wert auf flex-start zurück. Ist align-content des Containers first baseline (oder baseline) beziehungsweise last baseline, fällt er auf self-start beziehungsweise self-end zurück.

anchor-center

Bei ankerpositionierten Elementen werden die Elemente in Blockrichtung an der Mitte des zugehörigen Ankerelements ausgerichtet. Siehe Zentrieren am Anker mit anchor-center.

safe

Wird zusammen mit einem Schlüsselwort für die Ausrichtung verwendet. Wenn das gewählte Schlüsselwort dazu führen würde, dass das Element über den Ausrichtungscontainer hinausragt und dadurch Daten verloren gehen, wird das Element stattdessen so ausgerichtet, als wäre der Ausrichtungsmodus start.

unsafe

Wird zusammen mit einem Schlüsselwort für die Ausrichtung verwendet. Der angegebene Ausrichtungswert wird unabhängig von den relativen Größen des Elements und des Ausrichtungscontainers sowie von einem möglichen Überlauf mit Datenverlust angewendet.

Daneben gibt es zwei Werte, die für Flexbox definiert wurden, da sie auf Konzepten der Achsen des Flex-Modells beruhen. Sie funktionieren auch in Grid-Layouts:

flex-start

Richtet Flex-Elemente ausschließlich im Flex-Layout bündig an der Anfangsseite des Flex-Containers auf der Haupt- oder Querachse aus. Außerhalb eines Flex-Formatierungskontexts verhält sich dieser Wert wie start.

flex-end

Richtet Flex-Elemente ausschließlich im Flex-Layout bündig an der Endseite des Flex-Containers auf der Haupt- oder Querachse aus. Außerhalb eines Flex-Formatierungskontexts verhält sich dieser Wert wie end.

Formale Definition

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    |
  flow-start  |
  flow-end    |
  flex-start  |
  flex-end    

Beispiele

In diesem Beispiel gibt es einen Container mit sechs Kindelementen. Über ein <select>-Auswahlmenü lässt sich display des Containers zwischen grid und flex umschalten. Mit einem zweiten Menü lässt sich der Wert der Eigenschaft align-items des Containers ändern.

HTML

Wir verwenden ein <div> als Container mit sechs verschachtelten <div>-Kindelementen. Der Kürze halber sind das HTML für das Formular und das JavaScript, das die Klasse des Containers ändert, ausgeblendet.

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

CSS

Wir gestalten den Container und die Elemente so, dass zwei Zeilen mit Elementen entstehen. Wir definieren die Klassen .flex und .grid, die dem Container per JavaScript zugewiesen werden. Sie legen den Wert von display für den Container fest und ändern seine Hintergrund- und Rahmenfarben. So wird der Wechsel des Layouts zusätzlich sichtbar. Die sechs Flex-Elemente haben jeweils eine andere Hintergrundfarbe. Das vierte Element erstreckt sich über zwei Textzeilen, und das sechste hat eine größere Schrift.

.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;
}

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

Browser-Kompatibilität

Siehe auch

• align-self
• align-content
• justify-items
• Kurzschreibweise place-items
• Grundlagen von Flexbox
• Elemente in einem Flex-Container ausrichten
• Box-Ausrichtung im Grid-Layout
• Modul CSS-Box-Ausrichtung
• Modul CSS-Flexbox-Layout
• Modul CSS-Grid-Layout