align-content

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-content-Eigenschaft legt die Verteilung des Raums zwischen und um Inhaltelemente entlang der flexbox cross axis oder der Blockachse eines Grid oder Block-Level Elements fest.

Diese Eigenschaft hat keine Wirkung auf einzeilige Flex-Container (d.h. solche mit flex-wrap: nowrap).

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

Probieren Sie es aus

align-content: start;

align-content: center;

align-content: space-between;

align-content: space-around;

<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;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  column-gap: 10px;
  height: 180px;
}

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

Syntax

css

/* Normal alignment */
align-content: normal;

/* Basic positional alignment */
/* align-content does not take left and right values */
align-content: start;
align-content: center;
align-content: end;
align-content: flex-start;
align-content: flex-end;

/* Baseline alignment */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* Distributed alignment */
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: stretch;

/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;

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

Werte

normal

Die Elemente sind in ihrer Standardposition gepackt, als ob kein align-content-Wert gesetzt wäre.

start

Die Elemente sind aneinander gepackt und an der Startkante des Ausrichtungscontainers entlang der Cross-Achse ausgerichtet.

center

Die Elemente sind aneinander gepackt und im Zentrum des Ausrichtungscontainers entlang der Cross-Achse ausgerichtet.

end

Die Elemente sind aneinander gepackt und an der Endkante des Ausrichtungscontainers entlang der Cross-Achse ausgerichtet.

flex-start

Die Elemente sind aneinander gepackt gegen die Kante des Ausrichtungscontainers je nach Cross-Start-Seite des Flex-Containers. Dies gilt nur für Flex-Layoutelemente. Für Elemente, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie start behandelt.

flex-end

Die Elemente sind aneinander gepackt gegen die Kante des Ausrichtungscontainers je nach Cross-End-Seite des Flex-Containers. Dies gilt nur für Flex-Layoutelemente. Für Elemente, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie end behandelt.

baseline, first baseline, last baseline

Legt die Teilnahme an der First- oder Last-Baseline-Ausrichtung fest: Richtet die Ausrichtungs-Baseline des Boxensets mit der entsprechenden Baseline im gemeinsamen First- oder Last-Baseline-Set aller Boxen in ihrer Baseline-Sharing-Gruppe aus.

Die Baseline ist die Linie, auf der die meisten Buchstaben "liegen" und unter die Descender hinausragen.

Die Fallback-Ausrichtung für first baseline ist start, die für last baseline ist end.

space-between

Die Elemente sind gleichmäßig innerhalb des Ausrichtungscontainers entlang der Cross-Achse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist gleich. Das erste Element ist bündig mit der Startkante des Ausrichtungscontainers entlang der Cross-Achse und das letzte Element ist bündig mit der Endkante des Ausrichtungscontainers entlang der Cross-Achse.

space-around

Die Elemente sind gleichmäßig innerhalb des Ausrichtungscontainers entlang der Cross-Achse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist gleich. Der leere Raum vor dem ersten und nach dem letzten Element entspricht der Hälfte des Abstands zwischen jedem Paar benachbarter Elemente.

space-evenly

Die Elemente sind gleichmäßig innerhalb des Ausrichtungscontainers entlang der Cross-Achse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente, der Startkante und dem ersten Element sowie der Endkante und dem letzten Element sind genau gleich.

stretch

Wenn die kombinierte Größe der Elemente entlang der Cross-Achse kleiner ist als die Größe des Ausrichtungscontainers, werden alle auf auto-dimensionierten Elemente gleichermaßen (nicht proportional) vergrößert, während die durch max-height/max-width (oder gleichwertige Funktionalität) auferlegten Beschränkungen eingehalten werden, sodass die kombinierte Größe genau den Ausrichtungscontainer entlang der Cross-Achse füllt.

safe

Wird zusammen mit einem Ausrichtungs-Keyword verwendet. Wenn das gewählte Keyword bedeutet, dass das Element den Ausrichtungscontainer überläuft und Datenverluste verursacht, wird das Element stattdessen ausgerichtet, als ob der Ausrichtungsmodus start wäre.

unsafe

Wird zusammen mit einem Ausrichtungs-Keyword verwendet. Unabhängig von den relativen Größen des Elements und des Ausrichtungscontainers und davon, ob durch Überlauf Datenverluste verursacht werden könnten, wird der angegebene Ausrichtungswert eingehalten.

Hinweis: Die <content-distribution>-Werte (space-between, space-around, space-evenly und stretch) haben keine Wirkung im block layout, da der gesamte Inhalt in diesem Block als einzelnes alignment-subject behandelt wird.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	Block-containers, multi-column containers, flex containers
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

align-content = 
  normal                                   |
  <baseline-position>                      |
  <content-distribution>                   |
  <overflow-position>? <content-position>  

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

<content-distribution> = 
  space-between  |
  space-around   |
  space-evenly   |
  stretch        

<overflow-position> = 
  unsafe  |
  safe    

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

Beispiele

Auswirkungen verschiedener `align-content`-Werte

In diesem Beispiel können Sie zwischen drei verschiedenen display-Eigenschaftswerten wechseln, einschließlich flex, grid und block. Sie können auch zwischen den verschiedenen Werten für align-content wechseln.

HTML

html

<section>
  <div class="olive">Olive</div>
  <div class="coral">Coral</div>
  <div class="deepskyblue">Deep<br />sky<br />blue</div>
  <div class="orchid">Orchid</div>
  <div class="slateblue">Slateblue</div>
  <div class="maroon">Maroon</div>
</section>

<fieldset class="controls">
  <legend>Controls</legend>
  <div class="row">
    <label for="display">display: </label>
    <select id="display">
      <option value="block" selected>block</option>
      <option value="flex">flex</option>
      <option value="grid">grid</option>
    </select>
  </div>
  <div class="row">
    <label for="alignContent">align-content: </label>
    <select id="alignContent">
      <option value="normal" selected>normal</option>
      <option value="start">start</option>
      <option value="center">center</option>
      <option value="end">end</option>
      <option value="flex-start">flex-start</option>
      <option value="flex-end">flex-end</option>
      <option value="space-between">space-between</option>
      <option value="space-around">space-around</option>
      <option value="space-evenly">space-evenly</option>
    </select>
  </div>
  <p>CSS applied</p>
  <pre>
section {
  display: <span id="displayStyle">block</span>;
  align-content: <span id="align">normal</span>
}
  </pre>
</fieldset>

CSS

body {
  font-size: 1.25rem;
  display: flex;
  gap: 1rem;
}
section div {
  font-family: monospace;
  padding: 3px;
}

css

section {
  border: solid 1.5px tomato;
  height: 300px;
  width: 300px;
  flex-wrap: wrap; /* used by flex only */
  gap: 0.2rem; /* not used by block */
}
.olive {
  background-color: olive;
}
.coral {
  background-color: coral;
}
.deepskyblue {
  background-color: deepskyblue;
}
.orchid {
  background-color: orchid;
}
.slateblue {
  background-color: slateblue;
  color: white;
}
.maroon {
  background-color: maroon;
  color: white;
}

const alignContent = document.querySelector("#alignContent");
const display = document.querySelector("#display");
const container = document.querySelector("section");
const displayStyle = document.querySelector("#displayStyle");
const alignStyle = document.querySelector("#align");

alignContent.addEventListener("change", () => {
  updatePage();
});
display.addEventListener("change", () => {
  updatePage();
});
function updatePage() {
  const alVal = alignContent.value;
  const dVal = display.value;
  container.style.alignContent = alVal;
  container.style.display = dVal;
  alignStyle.innerText = alVal;
  displayStyle.innerText = dVal;
}
updatePage();

Ergebnis

Versuchen Sie, den Wert von display und den Wert von align-content zu ändern.

Im Block-Layout werden Kind-Elemente als einzelnes Element behandelt, was bedeutet, dass space-between, space-around und space-evenly anders funktionieren.

Spezifikationen

Specification
CSS Box Alignment Module Level 3 # align-justify-content
CSS Flexible Box Layout Module Level 1 # align-content-property

Browser-Kompatibilität

Siehe auch

Help improve MDN

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

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