Allgemeines
Die Flexbox ist eine Styling-Option, mit der das Layout der Seite angepasst wird. Die Flexbox ordnet alle Unterelemente eines Bereichs in einer Reihe an.
Eine Flexbox erzeugen
#example1 {
display: flex;
}
p1
p2
p3
p4
p5
Dieser Code erstellt eine Flexbox für das Div-Element mit der ID example1. Die p-Elemente innerhalb des Divs werden in einer Reihe angezeigt.
flex-direction
#example2 {
display: flex;
flex-direction: column;
}
p1
p2
p3
p4
p5
Die flex-direction gibt an, in welche Richtung die Elemente in der Flexbox angeordnet werden.
column ordnet Elemente untereinander an, row nebeneinander.
column-reverse und row-reverse
bewirken das gleiche mit umgekehrter reihenfolge der Elemente.