align-content

align-content: start;

align-content: center;

align-content: space-between;

align-content: space-around;

  

    

      
One
      
Two
      
Three
    
  

#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: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

Diese Eigenschaft hat keinen Effekt auf Flex-Container mit einer einzelnen Zeile (d.h. solche mit flex-wrap: nowrap).

normal

Die Elemente werden in ihrer Standardposition gepackt, als ob kein align-content-Wert gesetzt wurde.

start

Die Elemente sind bündig miteinander gegen die Startkante des Ausrichtungscontainers in der Querachse gepackt.

center

Die Elemente sind bündig miteinander in der Mitte des Ausrichtungscontainers entlang der Querachse gepackt.

end

Die Elemente sind bündig miteinander gegen die Endkante des Ausrichtungscontainers in der Querachse gepackt.

flex-start

Die Elemente sind bündig miteinander gegen die Kante des Ausrichtungscontainers gepackt, abhängig von der Quer-Startseite 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 miteinander gegen die Kante des Ausrichtungscontainers gepackt, abhängig von der Quer-Endseite 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 Ausrichtung der ersten oder letzten Baseline an: richtet die Ausrichtungsbaseline des Basislinien-Sets der Box mit der entsprechenden Basislinie im gemeinsamen ersten oder letzten Baseline-Set aller Boxen in ihrer Baseline-Teilungsgruppe aus.

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

space-around

Die Elemente sind gleichmäßig innerhalb des Ausrichtungscontainers entlang der Querachse verteilt. Der Abstand zwischen jedem Paar von benachbarten Elementen ist derselbe. Der Leerraum vor dem ersten und nach dem letzten Element ist halb so groß wie der Abstand 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, der Startkante und dem ersten Element sowie der Endkante und dem letzten Element ist exakt derselbe.

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 (nicht proportional) vergrößert, wobei die durch max-height/max-width (oder gleichwertige Funktionalität) auferlegten Einschränkungen respektiert werden, sodass die kombinierte Größe exakt den Ausrichtungscontainer entlang der Querachse 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 Datenverluste verursacht, wird das Element stattdessen so ausgerichtet, als wäre der Ausrichtungsmodus start.

unsafe

Wird zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Unabhängig von den relativen Größen des Elements und des Ausrichtungscontainers und ob ein Überlauf auftreten könnte, der Datenverluste verursacht, wird der gegebene Ausrichtungswert eingehalten.

align-content = 
  normal                                   |
                        |
                     |
  ?   

 = 
  [ first | last ]?  &&
  baseline           

 = 
  space-between  |
  space-around   |
  space-evenly   |
  stretch        

 = 
  unsafe  |
  safe    

 = 
  center      |
  start       |
  end         |
  flex-start  |
  flex-end    

In diesem Beispiel können Sie zwischen drei verschiedenen display-Eigenschaftenwerten wechseln, einschließlich flex, grid und block. Sie können auch zwischen den unterschiedlichen Werten für align-content wechseln.

HTML

  
Olive
  
Coral
  
Deep
sky
blue
  
Orchid
  
Slateblue
  
Maroon

  
Controls
  

    display: 
    
      block
      flex
      grid
    
  
  

    align-content: 
    
      normal
      start
      center
      end
      flex-start
      flex-end
      space-between
      space-around
      space-evenly
    
  
  
CSS applied
  
section {
  display: block;
  align-content: normal
}
  

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 einzelnes Element behandelt, was bedeutet, dass sich space-between, space-around und space-evenly anders verhalten.

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Kasten-Ausrichtung im Grid-Layout
• CSS-Kasten-Ausrichtung
• Block- und Inline-Layout im Normalfluss
• Block-Level-Inhalt
• display