1. Startseite
2. CSS
3. Flexbox

Flexbox

Das flexible BoxLayout Module ("Flexbox") wird verwendet, um eindimensionale Layouts zu erstellen. Also Layouts, die entweder spaltenweise oder zeilenweise dargestellt werden sollen.

Boxen erstellen

"Flexbox" basiert auf das Eltern-Kind-Prinzip. Es benötigt also ein Elternelement, welches die Kindelemente darin zusammen hält.

<div id="flex-eltern">
 <div class="flexi" id="flex-kind01">Kind01</div>
 <div class="flexi" id="flex-kind02">Kind02</div>
 <div class="flexi" id="flex-kind03">Kind03</div>
</div>

In CSS definieren wir das Elternelement mit einer maximalen Breite, einer Hintergrundfarbe sowie einen Rahmen und etwas Abstand zum zentrierten Text.

#flex-eltern {
 max-width: 800px;
 background-color: coral;
 border: 1px solid black;
 padding: .4rem;
 text-align: center;
}

Als Nächstes werden wir der Klasse "flexi", also allen Kindelementen einen Rahmen und etwas Abstand zueinander geben.

.flexi {
 border: 1px solid black;
 padding: .3rem;
 margin: .1rem;
}

Nun bekommen die Kindelemente noch eigene Hintergrundfarben.

#flex-kind01 {
 background-color: orange;
}
#flex-kind02 {
 background-color: tomato;
}
#flex-kind03 {
 background-color: salmon;
}

Bisher sind es ganz normale Boxen.

Flexboxen erstellen

Um aus den normalen Boxen die "Flexboxen" zu machen, geben wir dem Elternelement den Wert "flex" zur Eigenschaft "display".

#flex-eltern {
 max-width: 800px;
 background-color: coral;
 border: 1px solid black;
 padding: .4rem;
 text-align: center;
 display: flex;
}

Aus den normalen Boxen sind nun "Flexboxen" geworden.

Um die Besonderheit der Boxen zu verdeutlichen, benötigen wir etwas mehr Text.

Wenn wir jetzt unsere "Flexbox" betrachten, dann sehen wir 3 Boxen, die wie Inline-Elemente nebeneinanderstehen. "Flexbox" hat die 3 innen liegenden Boxen soweit in der Größe angepasst, dass sie gleichmäßig aufgeteilt werden. "Flexboxen" habe immer dieselbe Höhe innerhalb der Elternbox, wenn Sie nebeneinanderstehen. Um den Boxen die gleiche Größe zuzuweisen, geben wir den Kindelementen zur Eigenschaft "flex" den Wert "1".

#flex-kind01 {
 background-color: orange;
 flex: 1;
}
#flex-kind02 {
 background-color: tomato;
 flex: 1;
}
#flex-kind03 {
 background-color: salmon;
 flex: 1;
}

Die Aufteilung der Boxen erfolgt nun zu gleichen Teilen. Das bedeutet, dass die kleinste Box genauso groß ist wie die Box mit den größten Inhalt.

Boxen aufteilen

Wenn jetzt die Box von "Kind03" den halben Platz im Elternelement bekommen soll und die beiden anderen Boxen sich den restlichen Platz im Elternelement Teilen sollen. Dann erhöhen wir einfach den Wert von der Eigenschaft "flex" bei "Kind03".

#flex-kind01 {
 background-color: orange;
 flex: 1;
}
#flex-kind02 {
 background-color: tomato;
 flex: 1;
}
#flex-kind03 {
 background-color: salmon;
 flex: 2;
}

Die Boxen werden in 4 Teile aufgeteilt, dabei bekommen "Kind01" und "Kind02" jeweils einen Teil und "Kind03" bekommt 2 Teile, also ist die Aufteilung "25%", "25%" und "50%".

Der Inhalt kann in beliebiger Reihenfolge dargestellt werden, ohne das der Inhalt in HTML geändert werden muss. Dafür sorgt die Eigenschaft "order".

#flex-kind01 {
 background-color: orange;
 flex: 1;
 order: 1;
}
#flex-kind02 {
 background-color: tomato;
 flex: 1;
 order: 3;
}
#flex-kind03 {
 background-color: salmon;
 flex: 2;
 order: 2;
}

Die Boxen werden nach aufsteigenden Ordernummern aufgestellt.

Bisher stehen die "Flexboxen" nebeneinander, weil der Standardwert für die Eigenschaft "flex-direction" auf "row" steht. Mit dem Wert "column" stellen wir die Boxen untereinander.

#flex-eltern {
 max-width: 800px;
 background-color: coral;
 border: 1px solid black;
 padding: .4rem;
 text-align: center;
 display: flex;
 flex-direction: column;
}