CSS - Flexbox: Ein Anfängerleitfaden für flexible Box-Layouts

Hallo da draußen, zukünftige CSS-Meister! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt des CSS Flexbox zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich Ihnen sagen, dass Flexbox eines dieser game-changing Werkzeuge ist, das Ihr Leben im Webdesign erheblich einfacher machen wird. Also, tauchen wir ein!

Was ist CSS Flexbox?

Stellen Sie sich vor, Sie richten Möbel in einem Raum ein. Sie möchten, dass alles perfekt passt, aber Sie auch die Flexibilität haben, Dinge leicht umzustellen. Genau das macht CSS Flexbox für das Web-Layout! Es ist ein Layout-Modell, das es Ihnen ermöglicht, flexible responsive Layoutstrukturen zu gestalten, ohne Fließ Layouts oder Positionierungen zu verwenden.

Flexbox ermöglicht es leicht:

• Elemente vertikal und horizontal auszurichten
• Elemente umzustellen, ohne den HTML-Code zu ändern -Flexible Container-Elemente zu erstellen

Elemente der Flexbox

Bevor wir mit dem Coden beginnen, verstehen wir die beiden Hauptkomponenten der Flexbox:

1. Flex Container: Dies ist das übergeordnete Element, das alle Flex-Elemente enthält.
2. Flex Items: Dies sind die Kinderelemente innerhalb des Flex-Containers.

Denken Sie daran als eine Box (Container) mit Spielzeug (Elementen) darin. Die Art und Weise, wie Sie diese Spielzeuge anordnen, hängt davon ab, wie Sie Ihre Flexbox-Eigenschaften einstellen.

Grundlegendes Flexbox-Layout

Lassen Sie uns mit einem einfachen Beispiel beginnen:

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

.flex-container {
display: flex;
}

.flex-item {
padding: 20px;
background-color: #f1f1f1;
margin: 10px;
}

In diesem Beispiel haben wir einen Flex-Container mit drei Flex-Elementen darin erstellt. Die Eigenschaft display: flex; auf dem Container aktiviert Flexbox.

Vertikales Flexbox-Layout

Möchten Sie Ihre Elemente vertikal stapeln? Es ist so einfach wie ein Kuchen!

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

Diese Eigenschaft flex-direction: column; ändert die Hauptachse in vertikal, stapelt Ihre Elemente von oben nach unten.

Flexbox Justify Content Eigenschaft

Nun, lassen Sie uns über Positionierung sprechen. Die Eigenschaft justify-content richtet Elemente horizontal aus und akzeptiert die folgenden Werte:

Wert	Beschreibung
flex-start	Elemente werden zur Startseite der Flex-Richtung gepackt
flex-end	Elemente werden zur Endseite der Flex-Richtung gepackt
center	Elemente werden entlang der Linie zentriert
space-between	Elemente werden im Abstand gleichmäßig verteilt
space-around	Elemente werden gleichmäßig verteilt mit gleichem Abstand

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

Dies verteilt Ihre Elemente gleichmäßig über den Container.

Flexbox Align Items Eigenschaft

Während justify-content entlang der Hauptachse funktioniert, arbeitet align-items entlang der Querneigung. Es akzeptiert diese Werte:

Wert	Beschreibung
stretch	Elemente werden gestreckt, um in den Container zu passen (Standard)
flex-start	Elemente werden an der Startseite der Querneigung platziert
flex-end	Elemente werden an der Endseite der Querneigung platziert
center	Elemente werden in der Querneigung zentriert
baseline	Elemente werden so ausgerichtet, dass ihre Grundlinien ausgerichtet sind

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

Dies zentriert alle Elemente vertikal innerhalb des Containers.

Zentrierung eines Divs mit Flexbox

Hier ist ein cooler Trick: das Zentrieren eines Divs sowohl horizontal als auch vertikal ist mit Flexbox ein Kinderspiel!

.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* oder jede Höhe */
}

Flexbox Wrap Eigenschaft

Manchmal möchten Sie, dass Ihre Elemente zur nächsten Zeile umbrechen, wenn sie nicht hineinpassen. Hier kommt flex-wrap ins Spiel:

.flex-container {
display: flex;
flex-wrap: wrap;
}

Dies ermöglicht es Elementen, zur nächsten Zeile umzubrechen, wenn nicht genügend Platz vorhanden ist.

Flexbox Align Self Eigenschaft

Was ist, wenn Sie ein einzelnes Element anders ausrichten möchten? align-self zur Rettung!

.flex-item:nth-child(2) {
align-self: flex-end;
}

Diesrichert das zweite Element an die Unterseite des Containers aus, unabhängig von den anderen Elementen.

CSS Flexbox Container Eigenschaften

Hier ist eine Tabelle aller Flexbox-Eigenschaften, die Sie auf den Container anwenden können:

Eigenschaft	Beschreibung
display	Definiert einen Flex-Container
flex-direction	Definiert die Richtung der Flex-Elemente
flex-wrap	Gibt an, ob Flex-Elemente umbrechen sollten
flex-flow	Kurze Form von flex-direction und flex-wrap
justify-content	Richtet Flex-Elemente entlang der Hauptachse aus
align-items	Richtet Flex-Elemente entlang der Querneigung aus
align-content	Richtet Flex-Linien aus, wenn im Container zusätzlicher Platz ist

CSS Flexbox Element Eigenschaften

Und hier sind die Eigenschaften, die Sie auf Flex-Elemente anwenden können:

Eigenschaft	Beschreibung
order	Gibt die Reihenfolge eines Flex-Elements an
flex-grow	Gibt an, wie stark ein Flex-Element im Vergleich zu den anderen wachsen wird
flex-shrink	Gibt an, wie stark ein Flex-Element im Vergleich zu den anderen schrumpfen wird
flex-basis	Gibt die Anfangslänge eines Flex-Elements an
flex	Kurze Form von flex-grow, flex-shrink und flex-basis
align-self	Gibt die Ausrichtung für ein bestimmtes Flex-Element an

Und das war's! Sie haben gerade Ihren ersten großen Schritt in die Welt des CSS Flexbox gemacht. Erinnern Sie sich daran, dass das wie das Fahrradfahren ist, es mag am Anfang ein bisschen wackelig sein, aber mit Übung werden Sie很快zoomen.

Haben Sie keine Angst, diese Eigenschaften auszuprobieren. Der beste Weg zum Lernen ist Tun. Versuchen Sie, verschiedene Layouts zu erstellen, spielen Sie mit den Eigenschaften und sehen Sie, was passiert. Bevor Sie es wissen, werden Sie beautiful, flexible Layouts mit Leichtigkeit gestalten können!

Viel Spaß beim Flexen, zukünftige CSS-Meister!

Credits: Image by storyset