Vorlesung 14: Flexbox – Die moderne Art, Raum auszurichten und zu verteilen

Hallo! Sind Sie bereit, in eines der coolsten und leistungsstärksten CSS-Tools einzutauchen? Heute werden wir Flexbox erkunden. Wenn Sie jemals Schwierigkeiten hatten, Gegenstände ordentlich und reaktionsschnell auszurichten oder Platz zu verteilen, ist Flexbox Ihr neuer bester Freund.

1. Was ist Flexbox?

Flexbox (Flexible Box Layout) ist ein eindimensionales Layoutsystem, mit dem Sie die Ausrichtung, den Abstand und die Verteilung von Elementen innerhalb eines Containers steuern können – selbst wenn die Größe dieser Elemente unbekannt oder dynamisch ist.

Stellen Sie sich Flexbox als eine Toolbox zum Erstellen von Layouts vor, die je nach verfügbarem Platz gedehnt, verkleinert oder ausgerichtet werden können.

2. Die Magie beginnt mit der Anzeige: flex

Um Flexbox zu verwenden, müssen Sie lediglich display:flex für einen Container festlegen. Sobald Sie das tun, werden alle direkten untergeordneten Elemente dieses Containers zu Flex-Elementen und sie verhalten sich sofort anders.

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
}

Jetzt sind alle Elemente im .flex-container Flex-Elemente und können leicht manipuliert werden.

3. Flex Direction – Welchen Weg sollen wir einschlagen?

Standardmäßig ordnet Flexbox Elemente in einer Reihe (horizontal) an, aber was ist, wenn Sie sie in einer Spalte (vertikal) haben möchten? Flexbox gibt Ihnen mit der Eigenschaft flex-direction die vollständige Kontrolle.

• Zeile: Elemente in einer horizontalen Zeile ausrichten (dies ist die Standardeinstellung).
• Spalte: Elemente in einer vertikalen Spalte stapeln.
• row-reverse: Wie row, aber die Reihenfolge der Elemente ist umgekehrt.
• column-reverse: Wie Column, aber die Elemente werden in umgekehrter Reihenfolge gestapelt.

.flex-container {
    display: flex;
    flex-direction: column;
}

Jetzt werden die Elemente vertikal gestapelt!

4. Inhalte rechtfertigen – Dinge ausbreiten

Angenommen, Sie haben drei Artikel und möchten diese gleichmäßig in Ihrem Behälter verteilen. Hier bietet sich justify-content an.

• flex-start: Elemente werden am Anfang des Containers ausgerichtet (Standard).
• center: Elemente werden zentriert.
• space-between: Elemente sind gleichmäßig verteilt, wobei das erste Element am Anfang und das letzte Element am Ende steht.
• space-around: Elemente werden mit gleicher Polsterung um jedes Element verteilt.

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

Jetzt werden die Elemente gleichmäßig im Container verteilt.

5. Elemente ausrichten – Vertical Magic

Während justify-content die horizontale Ausrichtung steuert, kümmert sich align-items um die vertikale Ausrichtung (oder entlang der Querachse). Hier sind Ihre Optionen:

• stretch: Elemente werden gedehnt, um den Container zu füllen (Standard).
• Flex-Start: Elemente werden nach oben ausgerichtet.
• flex-end: Elemente werden nach unten ausgerichtet.
• center: Elemente werden vertikal zentriert.

.flex-container {
    display: flex;
    align-items: center;
}

Jetzt werden alle Elemente vertikal im Container zentriert.

6. Flex-Grow, Flex-Shrink und Flex-Basis – Feinabstimmung der Flex-Elemente

Manchmal möchten Sie, dass bestimmte Elemente größer oder kleiner werden oder eine feste Anfangsgröße haben. Mit den Eigenschaften flex-grow, flex-shrink und flex-basis können Sie dieses Verhalten steuern:

• flex-grow: Steuert, wie stark ein Artikel im Verhältnis zu den anderen Artikeln wachsen soll.
• flex-shrink: Steuert, wie stark ein Artikel im Vergleich zu den anderen Artikeln schrumpfen soll.
• Flex-Basis: Legt die Anfangsgröße des Elements fest, bevor es wächst oder schrumpft.

Beispiel:

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;
}

Dadurch wird sichergestellt, dass das Element bei 100 Pixel beginnt, bei Bedarf jedoch vergrößert werden kann, um zusätzlichen Platz auszufüllen, ohne zu verkleinern.

7. Flexbox-Beispiel in Aktion

Lassen Sie uns das alles anhand eines Beispiels zusammenfassen!

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    background-color: #f0f0f0;
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    flex-grow: 1;
}

In diesem Beispiel:

• Elemente sind in einer Reihe angeordnet.
• Sie sind mit justify-content: space-around gleichmäßig verteilt.
• Alle Elemente werden mit align-items: center vertikal im Container zentriert.
• Jedes Element wächst, um den verfügbaren Platz gleichmäßig auszufüllen, dank Flex-Grow: 1.

8. Warum Flexbox rockt

Flexbox nimmt uns einen Großteil der Komplexität des Layout-Designs ab, mit der wir früher in CSS zu kämpfen hatten. Keine Floats mehr, keine Sorgen mehr über das Löschen und viel einfacheres responsives Design!

Wichtige Erkenntnisse:

• Verwenden Sie display: flex, um einen Container in einen Flex-Container umzuwandeln.
• Verwenden Sie flex-direction, um die Flussrichtung festzulegen (Zeile oder Spalte).
• Verwenden Sie justify-content und align-items, um Abstand und Ausrichtung zu steuern.
• Optimieren Sie Ihre flexiblen Artikel mit flex-grow, flex-shrink und flex-basis.

Folgen Sie mir auf LinkedIn-

Ridoy Hasan