align-content

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 Auswirkung auf einzeilige Flex-Container (d.h. solche mit flex-wrap: nowrap).

normal

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

start

Die Objekte sind bündig aneinander gepackt am Start-Rand des Ausrichtungscontainers in der Querachse.

center

Die Objekte sind bündig aneinander gepackt im Zentrum des Ausrichtungscontainers entlang der Querachse.

end

Die Objekte sind bündig aneinander gepackt am End-Rand des Ausrichtungscontainers in der Querachse.

flex-start

Die Objekte sind bündig aneinander gepackt am Rand des Ausrichtungscontainers, abhängig von der Startseite der Querachse des Flex-Containers. Dies gilt nur für Flex-Layout-Objekte. Für Objekte, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie start behandelt.

flex-end

Die Objekte sind bündig aneinander gepackt am Rand des Ausrichtungscontainers, abhängig von der Endseite der Querachse des Flex-Containers. Dies gilt nur für Flex-Layout-Objekte. Für Objekte, 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 Basislinienausrichtung an: richtet die Ausrichtungsbasislinie des ersten oder letzten Basisliniensatzes der Box mit der entsprechenden Basislinie im gemeinsamen ersten oder letzten Basisliniensatz aller Boxen in seiner Basislinie-Austauschgruppe aus.

Die Ausweichausrichtung für first baseline ist start, für last baseline ist es end.

space-between

Die Objekte sind gleichmäßig verteilt innerhalb des Ausrichtungscontainers entlang der Querachse. Der Abstand zwischen jedem Paar benachbarter Objekte ist gleich. Das erste Objekt ist bündig mit dem Startrand des Ausrichtungscontainers in der Querachse und das letzte Objekt bündig mit dem Endrand des Ausrichtungscontainers in der Querachse.

space-around

Die Objekte sind gleichmäßig verteilt innerhalb des Ausrichtungscontainers entlang der Querachse. Der Abstand zwischen jedem Paar benachbarter Objekte ist gleich. Der Leerraum vor dem ersten und nach dem letzten Objekt entspricht der Hälfte des Abstands zwischen jedem Paar benachbarter Objekte.

space-evenly

Die Objekte sind gleichmäßig verteilt innerhalb des Ausrichtungscontainers entlang der Querachse. Der Abstand zwischen jedem Paar benachbarter Objekte, der Startrand und das erste Objekt sowie der Endrand und das letzte Objekt sind genau gleich.

stretch

Wenn die kombinierte Größe der Objekte entlang der Querachse kleiner ist als die Größe des Ausrichtungscontainers, werden alle auto-dimensionierten Objekte 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 genau den Ausrichtungscontainer entlang der Querachse füllt.

safe

Wird zusammen mit einem Ausrichtungsschlüsselwort verwendet. Wenn das gewählte Schlüsselwort bedeutet, dass das Objekt den Ausrichtungscontainer überläuft und Datenverlust verursacht, wird das Objekt stattdessen so ausgerichtet, als ob der Ausrichtungsmodus start wäre.

unsafe

Wird zusammen mit einem Ausrichtungsschlüsselwort verwendet. Unabhängig von den relativen Größen des Objekts und des Ausrichtungscontainers und davon, ob ein Überlauf, der Datenverlust verursacht, eintreten könnte, wird der angegebene Ausrichtungwert eingehalten.

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

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

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

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

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

• Grundkonzepte von Flexbox
• Elemente in einem Flex-Container ausrichten
• Box-Ausrichtung im Grid-Layout
• CSS-Box-Ausrichtung
• Block- und Inline-Layout im normalen Fluss
• Block-Level-Inhalte
• display