Flexbox – Die moderne Art, Raum auszurichten und zu verteilen

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 auf einem Container festlegen. Sobald Sie das tun, werden alle direkten untergeordneten Elemente dieses Containers zu Flex-Elementen und sie verhalten sich sofort anders.

<div class="flex-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.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 gehen?

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

• Reihe: Elemente in einer horizontalen Reihe ausrichten (dies ist die Standardeinstellung).
• Spalte: Elemente in einer vertikalen Spalte stapeln.
• Zeilenumkehr: Wie Zeile, 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 Gegenstände vertikal gestapelt!

4. Inhalte rechtfertigen – Dinge verbreiten

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).
• Mitte: Elemente werden zentriert.
• Leerzeichen dazwischen: Elemente sind gleichmäßig verteilt, wobei das erste Element am Anfang und das letzte Element am Ende steht.
• space-around: Elemente werden mit gleichmäßiger Polsterung um jedes Element verteilt angeordnet.

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

Jetzt sind die Gegenstände gleichmäßig im Behälter verteilt.

5. Elemente ausrichten – Vertikale Magie

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:

• Strecken: Elemente werden gedehnt, um den Behälter zu füllen (Standard).
• Flex-Start: Elemente werden nach oben ausgerichtet.
• Flex-Ende: Elemente werden nach unten ausgerichtet.
• Mitte: Elemente werden vertikal zentriert.

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

Jetzt werden alle Artikel vertikal im Container zentriert.

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

Manchmal möchten Sie, dass bestimmte Artikel wachsen, schrumpfen 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 Verhältnis 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, aber bei Bedarf 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!

<div class="flex-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.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 werden in einer Reihe angeordnet.
• Sie sind gleichmäßig verteilt mit justify-content: space-around.
• Alle Elemente werden mit align-items:center vertikal im Container zentriert.
• Jeder Artikel 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 (Zeile oder Spalte) festzulegen.
• 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

Das obige ist der detaillierte Inhalt vonFlexbox – Die moderne Art, Raum auszurichten und zu verteilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!