IT-Kurs CSS-Grundlagen 032_Flexlayout Flex

Flexlayout Flex

Seit langer Zeit waren die einzigen zuverlässigen und browserkompatibler Werkzeuge zur Erstellung von CSS-Layouts nur float und position. Diese beiden Werkzeuge funktionieren in den meisten Fällen sehr gut, aber in einigen Aspekten haben sie gewisse Einschränkungen, die es schwierig machen, Aufgaben zu erledigen.

Die folgenden einfachen Layoutanforderungen sind schwierig oder unmöglich mit solchen Werkzeugen (float und position) bequem und flexibel zu implementieren:

• Ein Blockelement innerhalb des Elterninhalts vertikal zentrieren.
• Alle untergeordneten Elemente eines Containers die gleiche verfügbare Breite/Höhe einnehmen lassen, unabhängig davon, wie viel Breite/Höhe verfügbar ist.
• Alle Spalten in einem mehrspaltigen Layout die gleiche Höhe annehmen lassen, auch wenn sie unterschiedliche Inhaltsmengen enthalten.

Das CSS Flex-Layout ist ein leistungsstarkes Layout-Tool in CSS, mit dem verschiedene flexible Layouts erstellt werden können. Um das CSS Flex-Layout zu beherrschen, müssen folgende Kenntnisse erworben werden:

• Flex-Container (flex container): Das Flex-Layout besteht aus Flex-Containern und Flex-Items. Der Flex-Container ist der Container, der Flex-Items in das Flex-Layout platziert. Der Flex-Container kann jedes Element sein, wird aber normalerweise als div-Element verwendet.
• Flex-Item (flex item): Flex-Items sind die Elemente, die im Flex-Container platziert werden. Flex-Items können jedes Element sein, werden aber normalerweise als div-Element verwendet.
• Hauptachse (main axis): Die Hauptachse ist die horizontale oder vertikale Richtung der Elemente im Flex-Layout.
• Querachse (cross axis): Die Querachse ist die vertikale oder horizontale Richtung der Elemente im Flex-Layout.

Flex-Container-Eigenschaften

Der Flex-Container verfügt über folgende Eigenschaften zur Steuerung des Flex-Layouts:

• display: Legt den Anzeigemodus des Flex-Containers fest. Der Flex-Container muss auf display: flex oder display: inline-flex gesetzt werden, um das Flex-Layout zu verwenden.
• flex-direction: Legt die Richtung der Hauptachse des Flex-Layouts fest. Werte können sein: flex-start Ausrichtung am Hauptachsenstart, flex-end Ausrichtung am Hauptachsenende, row Hauptachse horizontal angeordnet, row-reverse Hauptachse umgekehrt horizontal angeordnet, column Hauptachse vertikal angeordnet, column-reverse Hauptachse umgekehrt vertikal angeordnet.
• flex-wrap: Steuert, ob die Items im Flex-Container umbrochen werden. nowrap Standardwert, kein Umbruch, wrap Umbruch, wrap-reverse umgekehrter Umbruch.
• flex-flow: Kurzform für flex-direction und flex-wrap, zwei Werte, die jeweils flex-direction und flex-wrap entsprechen.
• justify-content: Legt die Ausrichtung der Flex-Items auf der Hauptachse im Flex-Container fest. Werte können sein: flex-start Ausrichtung am Hauptachsenstart, flex-end Ausrichtung am Hauptachsenende, center Zentrierung auf der Hauptachse, space-between gleichmäßige Ausrichtung auf der Hauptachse (Container-Anfang und -Ende ausgerichtet), space-around gleichmäßige Ausrichtung auf der Hauptachse (gleiche Abstände zwischen Items) oder space-evenly gleichmäßige Ausrichtung auf der Hauptachse (einschließlich gleicher Abstände an beiden Seiten).
• align-items: Legt die Ausrichtung der Flex-Items auf der Querachse im Flex-Container fest. Werte können sein: flex-start Ausrichtung am Querachsenstart, flex-end Ausrichtung am Querachsenende, center Zentrierung auf der Querachse, stretch Standardwert oder baseline Ausrichtung an der Textgrundlinie der ersten Zeile. Wirkt nur auf die untergeordneten Items des Flex-Containers.
• align-content: Wie align-items ist dies eine Eigenschaft zur Steuerung der Ausrichtung untergeordneter Items auf der Querachse, die nur wirksam wird, wenn der Flex-Container mehrere Achsen (mehrere Zeilen oder Spalten) hat.

Flex-Item-Eigenschaften

Flex-Items haben folgende Eigenschaften zur Steuerung des Layouts von Flex-Items im Flex-Layout:

• flex-grow: Legt das Dehnungsverhältnis des Flex-Items auf der Hauptachse fest. Der Wert kann eine Fließkommazahl zwischen 0 und 1 sein.
• flex-shrink: Legt das Schrumpfverhältnis des Flex-Items auf der Hauptachse fest. Der Wert kann eine Fließkommazahl zwischen 0 und 1 sein.
• flex-basis: Legt die Standardbreite oder -höhe des Flex-Items auf der Hauptachse fest. Der Wert kann ein Längenwert, ein Prozentwert oder auto sein.
• order: Legt die Reihenfolge des Flex-Items auf der Hauptachse fest. Der Wert kann eine ganze Zahl zwischen 1 und 65535 sein.

Beispiel:

1
/* Flex-Container-Stil */
2
.flex-container {
3
    display: flex;
4
    flex-direction: row; /* Hauptachsenrichtung horizontal */
5
    justify-content: space-around; /* Ausrichtung auf der Hauptachse */
6
    align-items: center; /* Ausrichtung auf der Querachse */
7
    height: 200px; /* Container-Höhe festlegen */
8
    border: 2px solid #333; /* Für bessere Visualisierung Rahmen hinzufügen */
9
}
10
/* Flex-Item-Stil */
11
.flex-item {
12
    flex: 1; /* Hauptachsenraum gleichmäßig aufteilen */
13
    text-align: center;
14
    padding: 20px;
15
    background-color: #f2f2f2;
16
}

1
<!-- Flex-Container -->
2
<div class="flex-container">
3
    <!-- Flex-Item 1 -->
4
    <div class="flex-item">Item 1</div>
5
    <!-- Flex-Item 2 -->
6
    <div class="flex-item">Item 2</div>
7
    <!-- Flex-Item 3 -->
8
    <div class="flex-item">Item 3</div>
9
</div>

Effekt: