align-content
Code Sources Icon Code Sources Icon

Die Eigenschaft "align-content" bezieht sich auf die vertikale Anordnung der Elemente auf einer oder mehrerer Zeilen.

 

Sie können:

  • oben, unten oder zentriert angeordnet werden > flex-start, flex-end, center
  • Abstand in der dazwischen oder drum herum > space-between, space-around
  • oder auf die gesamte Höhe verteilt werden > strech

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
HTML Elemente

Anregungen

Verändere die Eigenschaft von "align-content" um das Verhalten der Zeilen innerhalb des Containers zu untersuchen. (Wenn mehrere Zeilen vertikal angeordnet werden, muss zudem der Zeilenumbruch "flex-wrap:wrap;" aktiviert sein.

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;

Werden die Boxen vertikal auf die gesamte Höhe gestreckt, dürfen sie keine fixen Werte für die Höhe besitzen. Entferne im Element "div":

height:100px;

und teste das "strechen" der Boxen mit:

align-content: strech;
DB-Table: align-content