Was ist Flexbox?

Flexbox (Flexible Box Layout) ist ein CSS-Modul, das für die Erstellung komplexer und adaptiver Layouts entwickelt wurde. Es ermöglicht die Steuerung der Anordnung, Ausrichtung und Verteilung des Raums zwischen den Container-Elementen, selbst wenn deren Größen unbekannt oder dynamisch sind.

Grundkonzepte von Flexbox:

• Hauptachse (main axis): Achse, entlang der die Elemente angeordnet sind. Standardmäßig horizontal (von links nach rechts).
• Querachse (cross axis): Achse, die senkrecht zur Hauptachse steht. Standardmäßig vertikal (von oben nach unten).
• Container (flex container): Element, auf das die Flexbox-Eigenschaften angewendet werden (display: flex oder display: inline-flex).
• Flex-Items (flex items): Kind-Elemente des Containers.

Eigenschaften für den Flex-Container:

• display: flex oder inline-flex
• flex-direction: Bestimmt die Richtung der Hauptachse (row, row-reverse, column, column-reverse)
• flex-wrap: Bestimmt, ob die Elemente in eine neue Zeile umgebrochen werden (nowrap, wrap, wrap-reverse)
• justify-content: Ausrichtung der Elemente entlang der Hauptachse (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: Ausrichtung der Elemente entlang der Querachse (flex-start, flex-end, center, baseline, stretch)
• align-content: Ausrichtung der Zeilen oder Spalten entlang der Querachse in einem mehrzeiligen Container (flex-start, flex-end, center, space-between, space-around, stretch)

Eigenschaften für die Flex-Items:

• order: Bestimmt die Reihenfolge des Elements im Container
• flex-grow: Bestimmt, wie sehr das Element wachsen soll, um den verfügbaren Raum zu füllen
• flex-shrink: Bestimmt, wie sehr das Element schrumpfen soll, wenn nicht genug Platz vorhanden ist
• flex-basis: Bestimmt die Anfangsgröße des Elements vor der Raumverteilung
• flex: Kurzform für flex-grow, flex-shrink und flex-basis
• align-self: Überschreibt die Ausrichtung des Elements entlang der Querachse (flex-start, flex-end, center, baseline, stretch, auto)

Beispiel:

/* Container */
.container {
  display: flex; /* Aktiviert Flexbox */
  flex-direction: row; /* Elemente in Reihe */
  justify-content: center; /* Zentriert horizontal */
  align-items: center; /* Zentriert vertikal */
  height: 200px; /* Höhe des Containers */
  border: 1px solid black;
}

/* Elemente */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox vereinfacht die Erstellung responsiver Layouts erheblich im Vergleich zu traditionellen Methoden (float, inline-block, table).