align-content

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

normal

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

start

Die Elemente sind bündig aneinander ausgerichtet am Anfangsrand des Ausrichtungscontainers in der Querachse.

center

Die Elemente sind bündig aneinander ausgerichtet im Zentrum des Ausrichtungscontainers entlang der Querachse.

end

Die Elemente sind bündig aneinander ausgerichtet am Endrand des Ausrichtungscontainers in der Querachse.

flex-start

Die Elemente sind bündig aneinander ausgerichtet am Rand des Ausrichtungscontainers je nach cross-start 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 ausgerichtet am Rand des Ausrichtungscontainers je nach cross-end 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 end behandelt.

baseline, first baseline, last baseline

Spezifiziert die Teilnahme an der Ausrichtung der ersten- oder letzten-Basislinie: richtet die Ausrichtungs-Basislinie des ersten oder letzten Baselinesets der Box an der entsprechenden Basislinie im gemeinsamen ersten oder letzten Baselineset aller Boxen in ihrer Baseline-Sharing-Gruppe aus.

Die Standardausrichtung 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 Querachse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist derselbe. Das erste Element ist bündig mit dem Start-Rand des Ausrichtungscontainers in der Querachse und das letzte Element ist bündig mit dem Endrand des Ausrichtungscontainers in der Querachse.

space-around

Die Elemente sind gleichmäßig innerhalb des Ausrichtungscontainers entlang der Querachse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist derselbe. Der Leerraum 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 Querachse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente, dem Startrand und dem ersten Element, und dem Endrand und dem letzten Element sind alle genau gleich.

stretch

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

safe

Wird zusammen mit einem Ausrichtungsbegriff verwendet. Wenn das gewählte Schlüsselwort bedeutet, dass das Element den Ausrichtungscontainer überläuft, was zu Datenverlust führt, wird das Element stattdessen so ausgerichtet, als ob der Ausrichtungsmodus start wäre.

unsafe

Wird zusammen mit einem Ausrichtungsbegriff verwendet. Unabhängig von den relativen Größen des Elements und des Ausrichtungscontainers und ob ein Überlauf, der Datenverlust verursachen könnte, auftritt, wird der gegebene Ausrichtungswert berücksichtigt.

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    

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

<div class="wrapper">

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

CSS

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

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");
document.addEventListener("load", () => {
  updatePage();
});
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;
}

Ergebnis

Ändern Sie den display Wert und den align-content Wert.

Im Block-Layout werden Kindelemente als einzelnes Element behandelt, was bedeutet, dass space-between, space-around und space-evenly unterschiedlich verhalten.

• Grundkonzepte von Flexbox
• Ausrichtung von Elementen in einem Flex-Container
• Box-Ausrichtung in CSS-Raster-Layouts
• CSS-Box-Ausrichtung
• Block- und Inline-Layout im normalen Fluss
• Block-level_content
• display