Sobes.tech
Hilfe bei Vorstellungsgesprächen
Ressourcen
Vorbereitung auf Vorstellungsgespräche
Ressourcen
Jobsuche
Ressourcen
Legal
Zurück zu den Fragen
Junior

Wie man Flexbox für die Anordnung von Elementen auf der Seite verwendet?

sobes.tech KI

Antwort von AI

Flexbox (oder Flexible Box Layout) ist ein CSS-Modul, das für die Erstellung flexibler Layouts von Elementen in einem Container entwickelt wurde, um den Raum leicht zu verteilen und Elemente auszurichten, selbst wenn ihre Größen unbekannt sind oder sich dynamisch ändern.

Das Hauptkonzept von Flexbox ist der Flex-Container und seine Flex-Elemente.

Eigenschaften für den Flex-Container (display: flex;):

  • flex-direction: Bestimmt die Richtung, in der die Flex-Elemente im Container angeordnet werden (Hauptachse).

    • row (Standard): horizontal, von links nach rechts.
    • row-reverse: horizontal, von rechts nach links.
    • column: vertikal, von oben nach unten.
    • column-reverse: vertikal, von unten nach oben.

  • flex-wrap: Bestimmt, ob die Flex-Elemente in eine neue(n) Zeile(n) umgebrochen werden, wenn sie nicht in eine Zeile passen.

    • nowrap (Standard): alle in einer Zeile.
    • wrap: umbricht in neue Zeilen.
    • wrap-reverse: umbricht in neue Zeilen in umgekehrter Reihenfolge.

  • justify-content: Richtet die Flex-Elemente entlang der Hauptachse aus.

    • flex-start (Standard): am Anfang der Hauptachse.
    • flex-end: am Ende der Hauptachse.
    • center: in der Mitte der Hauptachse.
    • space-between: gleichmäßige Verteilung mit Abständen zwischen den Elementen.
    • space-around: gleichmäßige Verteilung mit Abständen um die Elemente.
    • space-evenly: gleichmäßige Verteilung mit gleichen Abständen zwischen und um die Elemente.

  • align-items: Richtet die Flex-Elemente entlang der Querachse aus (senkrecht zur Hauptachse).

    • stretch (Standard, wenn Flex-Elemente keine Höhe/Breite haben): dehnt die Elemente in Höhe/Breite entlang der Querachse.
    • flex-start: am Anfang der Querachse.
    • flex-end: am Ende der Querachse.
    • center: in der Mitte der Querachse.
    • baseline: Ausrichtung an der Textgrundlinie.

  • align-content: Richtet die Zeilen der Flex-Elemente entlang der Querachse aus, wenn Zeilenumbrüche vorhanden sind (flex-wrap: wrap). Funktioniert ähnlich wie justify-content, aber für Zeilen.

    • stretch (Standard): dehnt die Zeilen.
    • flex-start: Zeilen am Anfang der Querachse.
    • flex-end: Zeilen am Ende der Querachse.
    • center: Zeilen in der Mitte der Querachse.
    • space-between: gleichmäßige Verteilung der Zeilen mit Abständen zwischen ihnen.
    • space-around: gleichmäßige Verteilung der Zeilen mit Abständen um sie herum.

  • gap, row-gap, column-gap: Legt die Abstände zwischen den Flex-Elementen fest (einzelner Wert oder getrennt für Zeilen und Spalten).

.flex-container {
  display: flex; /* Macht das Element zum Flex-Container */
  flex-direction: row; /* Elemente werden horizontal angeordnet */
  flex-wrap: wrap; /* Elemente umbrechen in eine neue Zeile */
  justify-content: center; /* Elemente werden zentriert entlang der Hauptachse */
  align-items: center; /* Elemente werden zentriert entlang der Querachse */
  gap: 10px; /* 10px Abstand zwischen Flex-Elementen */
}

Eigenschaften für Flex-Elemente (direkte Nachkommen des Flex-Containers):

  • order: Bestimmt die Anzeigereihenfolge des Flex-Elements im Container (Standard 0). Kleinere Werte erscheinen zuerst.

  • flex-grow: Gibt den Koeffizienten an, der bestimmt, wie sehr ein Flex-Element im Vergleich zu anderen Elementen im Container wachsen kann, um den verfügbaren Raum zu füllen. Standard 0.

  • flex-shrink: Gibt den Koeffizienten an, der bestimmt, wie sehr ein Flex-Element bei Platzmangel schrumpfen kann. Standard 1.

  • flex-basis: Gibt die Grundgröße des Flex-Elements vor der Verteilung des freien Raums an. Kann in px, %, rem, auto usw. sein (Standard auto).

  • flex: Kurzform für flex-grow, flex-shrink, flex-basis (z.B. flex: 1 1 0;).

  • align-self: Überschreibt die Ausrichtung des Elements entlang der Querachse, die durch align-items im Container festgelegt ist. Nimmt die gleichen Werte an.

.flex-item {
  order: 2; /* Dieses Element wird als zweites angezeigt, unabhängig von seiner Position im HTML */
  flex-grow: 1; /* Dieses Element wird den verbleibenden Platz einnehmen */
  flex-shrink: 0; /* Dieses Element wird nicht schrumpfen */
  flex-basis: 100px; /* Grundgröße des Elements 100px */
  align-self: flex-start; /* Ausrichtung dieses Elements am Anfang der Querachse */
}

.another-item {
  flex: 1 1 auto; /* Kurzform: grow: 1, shrink: 1, basis: auto */
}

Flexbox ermöglicht die Erstellung verschiedener Layouts, von einfachen Ausrichtungen bis hin zu komplexeren, adaptiven Strukturen, indem es die Verteilung des Raums und die Ausrichtung der Elemente im Container steuert.

ZurückAls nächstes