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 Inhaltsobjekte entlang der Cross-Axis eines Flexbox oder eines Block-Achse eines Grid oder Block-Level Elements fest.

Das interaktive Beispiel unten verwendet 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 ob kein align-content Wert gesetzt wurde.

start

Die Elemente sind bündig aneinander gepackt am Anfangskante des Ausrichtungscontainers in der Cross-Axis.

center

Die Elemente sind in der Mitte des Ausrichtungscontainers entlang der Cross-Axis bündig aneinander gepackt.

end

Die Elemente sind bündig aneinander gepackt an der Endkante des Ausrichtungscontainers in der Cross-Axis.

flex-start

Die Elemente sind bündig aneinander gepackt an der Kante des Ausrichtungscontainers abhängig von der flex-start-Seite 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 aneinander gepackt an der Kante des Ausrichtungscontainers abhängig von der flex-end-Seite 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 Ausrichtung der ersten oder letzten Grundlinie an: richtet die Ausrichtungsgrundlinie des ersten oder letzten Grundliniensatzes der Box mit der entsprechenden Grundlinie im gemeinsamen ersten oder letzten Grundliniensatz aller Boxen in ihrer Grundlinien-Teilnehmergruppe aus.

die Basislinie ist die Linie, auf der die meisten Buchstaben "sitzen" und unter der Abwärtsstricheverlängern.

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-Axis verteilt. Der Abstand zwischen jedem Paar von benachbarten Elementen ist derselbe. Das erste Element ist bündig mit der Anfangskante des Ausrichtungscontainers in der Cross-Axis, und das letzte Element ist bündig mit der Endkante des Ausrichtungscontainers in der Cross-Axis.

space-around

Die Elemente sind gleichmäßig innerhalb des Ausrichtungscontainers entlang der Cross-Axis verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist derselbe. Der leere Raum vor dem ersten und nach dem letzten Element entspricht der Hälfte des Raums zwischen jedem Paar von benachbarten Elementen.

space-evenly

Die Elemente sind gleichmäßig innerhalb des Ausrichtungscontainers entlang der Cross-Axis verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente, der Anfangskante und dem ersten Element sowie der Endkante und dem letzten Element ist überall exakt gleich.

stretch

Wenn die kombinierte Größe der Elemente entlang der Cross-Axis kleiner als die Größe des Ausrichtungscontainers ist, wird die Größe aller auf auto gesetzten Elemente gleichmäßig (nicht proportional) erhöht, während die durch max-height/max-width (oder ähnliche Funktionalitäten) auferlegten Beschränkungen eingehalten werden, sodass die kombinierte Größe genau den Ausrichtungscontainer entlang der Cross-Axis füllt.

safe

Wird zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Wenn das gewählte Schlüsselwort dazu führt, dass das Element den Ausrichtungscontainer überfließt und Datenverlust verursacht, wird das Element so ausgerichtet, als ob der Ausrichtungsmodus start wäre.

unsafe

Wird zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Unabhängig von der relativen Größe des Elements und des Ausrichtungscontainers und davon, ob ein Überlauf, der Datenverlust verursachen könnte, auftritt, 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 ein einziger Ausrichtungs-Gegenstand 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();

Ergebnis

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

Im Block-Layout werden Kind-Elemente als ein einziges 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