Flexbox - Grundlagen

Flexbox: Kinder entlang einer Achse anordnen

Mit Flexbox (Flexible Box Layout) ordnet ihr die direkten Kinder eines Elements entlang einer Achse an - entweder nebeneinander oder untereinander:

.projects {
  display: flex;
}

• display: flex macht aus dem Element einen Flex-Container
• Alle direkten Kinder werden automatisch zu Flex-Items
• Ohne weitere Angaben: Die Kinder stehen nebeneinander, in einer Zeile, auf voller Höhe des Containers

Die Richtung festlegen: flex-direction

Das Eltern-Element legt die Richtung fest: horizontal (in einer Zeile) oder vertikal (in einer Spalte):

.projects {
  display: flex;
  flex-direction: row;    /* Standard: nebeneinander */
  /* flex-direction: column; */ /* Alternative: untereinander */
}

Wert	Richtung
row (Standard)	nebeneinander, von links nach rechts
row-reverse	nebeneinander, von rechts nach links
column	untereinander, von oben nach unten
column-reverse	untereinander, von unten nach oben

Praxisbeispiel: Navigationsmenü als Zeile oder Spalte

Derselbe Ausgangspunkt - eine ganz normale Liste mit Links in einem nav-Tag, auch ohne CSS benutzbar:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/ueber-uns">Über uns</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>

nav ul {
  display: flex;
  list-style: none;
  padding-left: 0;
}

Nur mit display: flex steht das Menü schon horizontal nebeneinander - flex-direction: row ist ja der Standard. Ein einziges Wort macht daraus ein vertikales Menü:

nav ul {
  display: flex;
  flex-direction: column; /* statt row */
  list-style: none;
  padding-left: 0;
}

Tipp

Genau dasselbe HTML, nur eine geänderte Property - das ist der große Vorteil von Flexbox gegenüber dem alten float-Ansatz: die Richtung ist eine einzige, zentrale Stellschraube.

Zwei Achsen: Haupt- und Querachse

Flexbox denkt in zwei Achsen - das ist der Schlüssel zum Verständnis der nächsten Properties:

• Hauptachse (main axis): die Richtung von flex-direction - bei row also horizontal
• Querachse (cross axis): immer senkrecht zur Hauptachse - bei row also vertikal

Hinweis

Das ist der Grund, warum es gleich zwei verschiedene Alignment-Properties gibt: justify-content für die Hauptachse, align-items für die Querachse. Bei flex-direction: column tauschen beide praktisch ihre Bedeutung, weil sich die Hauptachse dreht.

Verteilung entlang der Hauptachse: justify-content

.projects {
  display: flex;
  justify-content: flex-start; /* Standard: alle möglichst weit links */
}

Wert	Verhalten
flex-start (Standard)	alle Elemente am Anfang
flex-end	alle Elemente am Ende
center	alle Elemente zentriert
space-between	erstes/letztes Element am Rand, Rest gleichmäßig verteilt
space-around	gleicher Abstand rundum jedes Elements

Ausrichtung auf der Querachse: align-items

.projects {
  display: flex;
  align-items: center; /* alle Elemente vertikal zentriert (bei row) */
}

Wert	Verhalten
stretch (Standard)	alle Elemente füllen die volle Höhe des Containers
flex-start	alle Elemente am Anfang der Querachse
flex-end	alle Elemente am Ende der Querachse
center	alle Elemente auf der Querachse zentriert

Praxis-Klassiker

Ein Element mit einer Zeile Text horizontal und vertikal zentrieren - früher ein echtes Problem, mit Flexbox zwei Zeilen:

.center-box {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertikal */
}