`align-content` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die CSS align-content-Eigenschaft legt die Verteilung des Raums zwischen und um Inhaltselemente entlang der Querachse eines Flexcontainers oder entlang der Blockachse eines Gitters oder eines Block-Levels fest.

Diese Eigenschaft hat keine Auswirkung auf Flexcontainer mit nur einer Zeile (d.h. solche mit flex-wrap: nowrap).

Das interaktive Beispiel unten verwendet das Rasterlayout, 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

Diese Eigenschaft wird mit einem oder zwei der folgenden Schlüsselwortwerte angegeben:

normal

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

start

Die Elemente sind bündig gegeneinander an der Startkante des Ausrichtungscontainers in der Querachse angeordnet.

center

Die Elemente sind bündig gegeneinander im Zentrum des Ausrichtungscontainers entlang der Querachse angeordnet.

end

Die Elemente sind bündig gegeneinander an der Endkante des Ausrichtungscontainers in der Querachse angeordnet.

flex-start

Die Elemente sind bündig gegeneinander an der Kante des Ausrichtungscontainers angeordnet, abhängig von der Quer-Startseite des Flexcontainers. Dies gilt nur für Flex-Layout-Elemente. Für Elemente, die keine Kinder eines Flexcontainers sind, wird dieser Wert wie start behandelt.

flex-end

Die Elemente sind bündig gegeneinander an der Kante des Ausrichtungscontainers angeordnet, abhängig von der Quer-Endseite des Flexcontainers. Dies gilt nur für Flex-Layout-Elemente. Für Elemente, die keine Kinder eines Flexcontainers 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 Baselinesets der Box mit der entsprechenden Baseline im gemeinsamen ersten oder letzten Baselineset aller Boxen in ihrer Baseline-Teilungsgruppe aus.

Die Basislinie ist die Linie, auf der die meisten Buchstaben "sitzen" und unter der die Unterlängen sich erstrecken.

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

space-between

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

space-around

Die Elemente sind gleichmäßig im Ausrichtungscontainer entlang der Querachse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist gleich. Der Leerraum vor dem ersten und nach dem letzten Element entspricht der Hälfte des Raums zwischen jedem Paar benachbarter Elemente.

space-evenly

Die Elemente sind gleichmäßig im Ausrichtungscontainer entlang der Querachse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente, dem Start und dem ersten Element, sowie dem Ende und dem letzten Element sind exakt gleich.

stretch

Wenn die kombinierte Größe der Elemente entlang der Querachse kleiner ist als die Größe des Ausrichtungscontainers, werden alle auto-Größen-Elemente gleichmäßig erhöht (nicht proportional), wobei die Beschränkungen durch max-height/max-width (oder gleichwertige Funktionalität) weiterhin respektiert werden, so dass die kombinierte Größe genau den Ausrichtungscontainer entlang der Querachse füllt.

safe

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

unsafe

In Verbindung mit einem Ausrichtungs-Schlüsselwort verwendet. Ungeachtet der relativen Größen des Elements und des Ausrichtungscontainers und ob Überlauf, der möglicherweise Datenverlust verursacht, auftritt, wird der gegebene Ausrichtungswert eingehalten.

Hinweis: Die <content-distribution>-Werte (space-between, space-around, space-evenly und stretch) haben keine Wirkung im Block-Layout, da alle Inhalte in diesem Block als einzelnes Ausrichtungsobjekt behandelt werden.

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 align-content zu ändern.

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

Spezifikationen

Spezifikation
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

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

align-content CSS property

HTML

CSS

Ergebnis

Help improve MDN

`align-content` CSS property