Flexbox Erklärung

Flexbox Eigenschaften

Flex Container Eigenschaften

• display: flex, inline-flex
• flex-direction: row, row-reverse, column, column-reverse
• flex-wrap: nowrap, wrap, wrap-reverse
• flex-flow: flex-direction / flex-wrap
• justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly
• align-items: flex-start, flex-end, center, baseline, stretch
• align-content: flex-start, flex-end, center, space-between, space-around, stretch

Flex Item Eigenschaften

• order: integer (Standard: 0)
• flex-grow: number (Standard: 0)
• flex-shrink: number (Standard: 1)
• flex-basis: auto, <length>, <percentage>
• flex: flex-grow flex-shrink flex-basis (Kurzschreibweise)
• align-self: auto, flex-start, flex-end, center, baseline, stretch

Flexbox Eigenschaften: Beschreibungen und Beispiele

Flex Container Eigenschaften

display

Bestimmt, ob ein Element ein Flexcontainer ist. Mögliche Werte:

• flex: Das Element wird als Block-Flexcontainer angezeigt.
• inline-flex: Das Element wird als Inline-Flexcontainer angezeigt.

.container {
    display: flex;
}
    

flex-direction

Definiert die Hauptrichtung der Flexitems im Container. Mögliche Werte:

• row: Items werden von links nach rechts angeordnet.
• row-reverse: Items werden von rechts nach links angeordnet.
• column: Items werden von oben nach unten angeordnet.
• column-reverse: Items werden von unten nach oben angeordnet.

.container {
    flex-direction: column;
}
    

flex-wrap

Legt fest, ob Flexitems in eine neue Zeile umbrechen, wenn der Platz nicht ausreicht. Mögliche Werte:

• nowrap: Alle Items bleiben in einer Zeile (Standard).
• wrap: Items umbrechen in die nächste Zeile.
• wrap-reverse: Items umbrechen in die vorherige Zeile.

.container {
    flex-wrap: wrap;
}
    

flex-flow

Kurzschreibweise für flex-direction und flex-wrap. Syntax: flex-direction flex-wrap

.container {
    flex-flow: row wrap;
}
    

justify-content

Justiert die Flexitems entlang der Hauptachse. Mögliche Werte:

• flex-start: Items am Anfang des Containers ausrichten.
• flex-end: Items am Ende des Containers ausrichten.
• center: Items in der Mitte des Containers ausrichten.
• space-between: Gleichmäßiger Abstand zwischen den Items.
• space-around: Gleichmäßiger Abstand um jedes Item herum.
• space-evenly: Gleichmäßiger Abstand zwischen und um die Items.

.container {
    justify-content: space-between;
}
    

align-items

Justiert die Flexitems entlang der Querachse. Mögliche Werte:

• flex-start: Items am Anfang der Querachse ausrichten.
• flex-end: Items am Ende der Querachse ausrichten.
• center: Items in der Mitte der Querachse ausrichten.
• baseline: Items entlang ihrer Grundlinie ausrichten.
• stretch: Items werden gestreckt, um den Container auszufüllen (Standard).

.container {
    align-items: center;
}
    

align-content

Justiert die Flexzeilen innerhalb des Containers bei zusätzlichem Platz entlang der Querachse. Mögliche Werte:

• flex-start: Zeilen am Anfang des Containers ausrichten.
• flex-end: Zeilen am Ende des Containers ausrichten.
• center: Zeilen in der Mitte des Containers ausrichten.
• space-between: Gleichmäßiger Abstand zwischen den Zeilen.
• space-around: Gleichmäßiger Abstand um jede Zeile herum.
• stretch: Zeilen werden gestreckt, um den Container auszufüllen (Standard).

.container {
    align-content: space-around;
}
    

Flex Item Eigenschaften

order

Bestimmt die Reihenfolge der Flexitems. Standardwert: 0. Negative Werte sind erlaubt.

.item {
    order: 2;
}
    

flex-grow

Bestimmt, wie viel ein Flexitem relativ zu den anderen wachsen kann, um den verfügbaren Platz zu füllen. Standardwert: 0. Mögliche Werte: number (z.B. 1, 2, 3)

.item {
    flex-grow: 1;
}
    

flex-shrink

Bestimmt, wie viel ein Flexitem relativ zu den anderen schrumpfen kann, wenn der Platz nicht ausreicht. Standardwert: 1. Mögliche Werte: number (z.B. 0, 1, 2)

.item {
    flex-shrink: 2;
}
    

flex-basis

Legt die Basisgröße eines Flexitems fest, bevor der verfügbare Platz verteilt wird. Standardwert: auto. Mögliche Werte: <length>, <percentage>

.item {
    flex-basis: 200px;
}
    

flex

Kurzschreibweise für flex-grow, flex-shrink und flex-basis. Syntax: flex-grow flex-shrink flex-basis

.item {
    flex: 1 0 200px;
}
    

align-self

Überschreibt die align-items Eigenschaft für ein spezifisches Flexitem. Mögliche Werte:

• auto: Übernimmt den Wert von align-items.
• flex-start
• flex-end
• center
• baseline
• stretch

.item {
    align-self: center;
}
    

Beispiel: Flexbox Layout

Ein einfaches Beispiel, das einige Flexbox-Eigenschaften verwendet:

    
    
    


    

        
Item 1
        
Item 2
        
Item 3
    


    

In diesem Beispiel wird ein Flexcontainer mit drei Items erstellt. Die Items wachsen und schrumpfen gleichmäßig und haben eine Basisbreite von 100px. Beim Hover-Effekt vergrößern sich die Items leicht, um die Interaktivität zu verdeutlichen.