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 Inhaltselemente entlang einer Flexbox's Querseite oder der Blockachse eines Grid oder block-level Elements fest.

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

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

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 wäre kein align-content-Wert gesetzt.

start

Die Elemente sind bündig aneinander gepackt gegen den Start-Rand des Ausrichtungscontainers entlang der Querseite.

center

Die Elemente sind bündig aneinander in der Mitte des Ausrichtungscontainers entlang der Querseite gepackt.

end

Die Elemente sind bündig aneinander gepackt gegen den End-Rand des Ausrichtungscontainers entlang der Querseite.

flex-start

Die Elemente sind bündig aneinander gepackt gegen den Rand des Ausrichtungscontainers je nach Querstarter-Seite des Flex-Containers. Dies gilt nur für Flex-Layout-Elemente. Für Elemente, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie start behandelt.

flex-end

Die Elemente sind bündig aneinander gepackt gegen den Rand des Ausrichtungscontainers je nach Querendseite des Flex-Containers. Dies gilt nur für Flex-Layout-Elemente. Für Elemente, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie end behandelt.

baseline, first baseline, last baseline

Gibt die Teilnahme an der ersten- oder letzten-Baseline-Ausrichtung an: richtet die Ausrichtungsbaseline des ersten oder letzten Baseline-Sets der Box mit der entsprechenden Baseline im gemeinsamen ersten oder letzten Baseline-Set aller Boxen in seiner Baseline-Gruppe aus.

die Baseline ist die Linie, auf der die meisten Buchstaben "sitzen" und unter der Nachschriften verlängert werden.

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

space-between

Die Elemente sind gleichmäßig innerhalb des Ausrichtungscontainers entlang der Querseite verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist derselbe. Das erste Element ist bündig mit dem Start-Rand des Ausrichtungscontainers entlang der Querseite und das letzte Element ist bündig mit dem End-Rand des Ausrichtungscontainers entlang der Querseite.

space-around

Die Elemente sind gleichmäßig innerhalb des Ausrichtungscontainers entlang der Querseite verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist derselbe. Der freie 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 Querseite verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente, dem Start-Rand und dem ersten Element, und dem End-Rand und dem letzten Element, ist überall genau gleich.

stretch

Wenn die kombinierte Größe der Elemente entlang der Querseite kleiner als die Größe des Ausrichtungscontainers ist, werden alle auto-dimensionierten Elemente gleichmäßig (nicht proportional) vergrößert, während die durch max-height/max-width (oder gleichwertigen Funktionen) auferlegten Einschränkungen respektiert werden, sodass die kombinierte Größe den Ausrichtungscontainer entlang der Querseite genau ausfüllt.

safe

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

unsafe

Wird zusammen mit einem Ausrichtungs-Keyword verwendet. Unabhängig von den relativen Größen des Elements und des Ausrichtungscontainers und ob ein Überlauf, der Datenverlust verursachen könnte, eintritt oder nicht, wird der gegebene Ausrichtungswert eingehalten.

Hinweis: Die <content-distribution>-Werte (space-between, space-around, space-evenly, and stretch) haben im Block-Layout keine Wirkung, da der gesamte Inhalt in diesem Block als ein 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, darunter 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();

Resultat

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

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

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