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

normal

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

start

Die Elemente sind direkt aneinander gepackt gegen die Startkante des Ausrichtungscontainers in der Cross-Achse.

center

Die Elemente sind direkt aneinander gepackt im Zentrum des Ausrichtungscontainers entlang der Cross-Achse.

end

Die Elemente sind direkt aneinander gepackt gegen die Endkante des Ausrichtungscontainers in der Cross-Achse.

flex-start

Die Elemente sind direkt aneinander gepackt gegen die Kante des Ausrichtungscontainers je nach der 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 direkt aneinander gepackt gegen die Kante des Ausrichtungscontainers je nach der 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

Gibt die Teilnahme an der ersten oder letzten Baseline-Ausrichtung an: richtet die Ausrichtungs-Baseline des Box-Erste- oder Letzte-Baseline-Satzes mit der entsprechenden Basislinie in der gemeinsamen ersten oder letzten Baseline-Satz aller Boxen in seiner Baseline-Gruppierung aus.

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 Cross-Achse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist gleich. Das erste Element flush mit der Startkante des Ausrichtungscontainers in der Cross-Achse und das letzte Element flush mit der Endkante des Ausrichtungscontainers in der Cross-Achse.

space-around

Die Elemente sind gleichmäßig im Ausrichtungscontainer entlang der Cross-Achse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist gleich. Der leere Raum 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 Cross-Achse verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente, der Startkante und dem ersten Element, und der Endkante und dem letzten Element, ist genau gleich.

stretch

Wenn die kombinierte Größe der Elemente entlang der Cross-Achse kleiner ist als die Größe des Ausrichtungscontainers, werden alle in auto-Größe gesetzten Elemente gleichmäßig (nicht proportional) vergrößert, während die durch max-height/max-width (oder entsprechende Funktionalität) auferlegten Einschränkungen eingehalten werden, sodass die kombinierte Größe genau den Ausrichtungscontainer entlang der Cross-Achse ausfüllt.

safe

Wird zusammen 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

Wird zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Ungeachtet der relativen Größen des Elements und des Ausrichtungscontainers und ob ein Überlauf, der Datenverlust verursachen könnte, auftreten kann, wird der gegebene Ausrichtungswert beibehalten.

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, einschließlich flex, grid und block, wechseln. 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 betrachtet, was bedeutet, dass space-between, space-around, und space-evenly unterschiedlich verhalten.

• Grundlegende Konzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Box-Ausrichtung im Grid-Layout
• CSS Box-Ausrichtung
• Block- und Inline-Layout im normalen Fluss
• Block-Level Inhalte
• display