CSS Flexbox-Tutorial: Die Grundlagen

Flexbox ist eine ausgezeichnete Methode, um Seitenlayouts in CSS zu handhaben. Es kann die Höhe und Breite eines Elements manipulieren, um den gesamten Platz innerhalb des Eltern-Containers ("Flex-Container") einzunehmen und den vertikalen und horizontalen Fluss jedes Kinds ("Flex-Items") zu steuern.

Wenn Sie neu bei flexbox sind, lernen Sie alles, was Sie brauchen, um sofort loszulegen. Wir gehen auf die Grundlagen ein und diskutieren die am häufigsten verwendeten Flexbox-Eigenschaften mit geeigneten Beispielen.

Was ist CSS-Flexbox?

Im Gegensatz zu herkömmlichen Layouts (Block-Layout, Inline-Layout, Tabellen-Layout und positioniertes Layout) ist Flexbox ein optimiertes Box-Modell für die Gestaltung komplexer Benutzeroberflächen-Layouts. Es stimmt, dass CSS zum Stylen von Elementen verwendet wird, aber CSS Flexbox bietet effiziente Lösungen, wenn es darum geht, reaktionsschnelle und flüssige Layouts zu erstellen, Elemente auszurichten und Elemente anzuordnen und neu anzuordnen, ohne den HTML-Code zu ändern.

Mit anderen Worten, mit CSS flexbox sind die Elemente „flexibel“ und können optimal in der Größe und Position angepasst werden, um ein modernes responsives Design zu entwickeln.

Grundlegendes Flexbox-Konzept und Terminologie

Flex-Container und Flex-Item sind die Grundkomponenten im Flexbox-Layout. Sie können flex-container als übergeordnetes Element auf einer Seite betrachten, die untergeordnete Elemente enthält, die als flex-items bekannt sind . Die Hauptidee hinter dem Flex-Layout besteht darin, dass alle Flex-Items im Flex-Container entweder entlang der Hauptachse oder der Querachse angeordnet sind, wie unten gezeigt:

Hauptachse : Wenn Flex-Items in einer Reihe ausgerichtet sind, verläuft die Hauptachse entlang der Reihe. Wenn die Flex-Items hingegen in einer Spalte ausgerichtet sind, wird die Hauptachse entlang der Spalte ausgerichtet. Kurz gesagt, die Flex-Richtung bestimmt die Hauptachse.

Querachse : Sie steht senkrecht zur Hauptachse. Mit anderen Worten, wenn die Flex-Richtung Reihe oder Reihen-Umkehr ist , verläuft die Hauptachse entlang der Breite des Flex-Containers und daher verläuft die Querachse entlang der Höhe des Flex-Containers. Wenn andererseits die Flex-Richtung Spalte oder Spalten-Umkehr ist , verläuft die Hauptachse entlang der Höhe des Flex-Containers und somit verläuft die Querachse entlang der Breite des Flex-Containers .

Flexbox-Eigenschaften für den Flex-Container

Die Anzeigeeigenschaft :

Als erstes müssen Sie die display -Eigenschaft auf flex setzen . Dies definiert einen Flex-Container. Andere Werte für verschiedene Layouts können inline , block und inline-block sein . Durch Speichern der Anzeige: flex; Sie aktivieren einen Flex-Kontext für alle Flex-Items .

Die Biegerichtungseigenschaft :

Es wird verwendet, um die Ausrichtung der Hauptachse im Flex-Container anzupassen. Daher ist es eine definierende Eigenschaft, in der die Richtung der Flex-Items festgelegt wird. Die Werte können row (Standard), row-reverse , column und column-reverse sein .

Die Flex-Wrap- Eigenschaft:

Wenn Sie versuchen, die Anzahl der Flex-Items im Flex-Container zu erhöhen, versuchen sie standardmäßig, alle in eine Zeile zu passen. Sie können dies ändern, indem Sie die Eigenschaft flex-wrap so einstellen, dass die Elemente innerhalb des übergeordneten Containers in mehrere Zeilen eingeschlossen werden. Es akzeptiert drei Werte: nowrap (Standard), wrap und wrap-reverse .

Die Flex-Flow- Eigenschaft:

Jetzt kennen Sie die Haupt- und Querachse des Flexcontainers. Die Flex-Flow- Eigenschaft kombiniert die beiden Achsen zu einer, da sie eine Abkürzung für Flex-Richtungs- und Flex-Wrap- Eigenschaften ist. Daher ist der Standardwert row nowrap , und Sie können weiter experimentieren.

Die justify-content- Eigenschaft:

Die Eigenschaft justify-content wird verwendet, um untergeordnete Elemente in einem übergeordneten flex-container auszurichten. Der gesamte Inhalt wird basierend auf der Hauptachse ausgerichtet. Wenn wir diesen Elementen jedoch eine bestimmte Höhe oder Breite vorgeben, verhält sich Justify-Content anders. Der entscheidende Punkt besteht darin, genügend Platz im übergeordneten Container zu haben, bevor die Eigenschaften von justify-content und align-items getestet werden.

Die Eigenschaft justify-content ermöglicht die Ausrichtung auf fünf verschiedene Arten:

 justify-content: flex-start;

Dies ist der Standardwert. Alle Elemente werden am Anfang des übergeordneten Containers ausgerichtet, dh oben links im übergeordneten Container.

 justify-content: center;

Alle Artikel werden in der Mitte des Muttercontainers eingepackt.

 justify-content: flex-end;

Alle Elemente werden in die Endzeile des übergeordneten Containers verschoben.

 justify-content: space-between;

Alle Artikel werden gleichmäßig in der Zeile verteilt, wobei der erste Artikel am Anfang und der letzte Artikel am Ende steht.

 justify-content: space-around;

Alle Artikel haben auf der linken und rechten Seite gleich viel Platz. Beachten Sie, dass das erste und das letzte Element eine Raumeinheit zum Containerrand haben, aber zwei Raumeinheiten zwischen dem benachbarten Flex-Item .

Die Eigenschaft align-items :

Das Ausrichten von Elementen ähnelt dem Justify-Content mit einem kleinen Unterschied. Hier werden alle Elemente anhand der Querachse (senkrecht zur Hauptachse) ausgerichtet.

align-items akzeptiert fünf verschiedene Werte:

 align-items: stretch;

Dies ist der Standardwert. Alle Gegenstände dehnen sich, um den Behälter zu füllen.

 align-items: flex-start;

Alle Artikel werden am Anfang des Containers (quer zur Achse) verpackt.

 align-items: center;

Alle Artikel werden zur Mitte des Flex-Containers in der Querachse gepackt.

 align-items: flex-end;

Alle Artikel werden bis zum Ende des Containers (quer zur Achse) verpackt.

 align-items: baseline;

Alle Elemente sind so ausgerichtet, dass ihre Grundlinien (Texte) ausgerichtet sind.

Die align-content- Eigenschaft:

Stellen Sie sicher, dass der flex-container Elemente in mehreren Zeilen enthält und die flex-wrap- Eigenschaft entweder auf Wrap oder Wrap-Reverse gesetzt ist, um die align-content- Eigenschaft zu beobachten. Dies ist notwendig, da die Eigenschaft justify-content Flex-Elemente innerhalb der Hauptachse ausrichtet , die Eigenschaft align-content diese Zeilen in der Querachse ausrichtet (wenn etwas zusätzlicher Platz vorhanden ist).

Flexbox-Eigenschaften für Flex-Elemente

Die align-self- Eigenschaft:

Es ermöglicht Ihnen, die Ausrichtung eines einzelnen Flex-Items anzupassen. Es besitzt alle Eigenschaften von align-items, wie wir sie im flex-container eingestellt haben . Sie können es verwenden, um die Position eines einzelnen flexiblen Artikels zu ändern , ohne die anderen benachbarten Artikel zu stören. Es akzeptiert sechs Werte: auto , flex-start , flex-end , center , baseline , stretch .

Die Auftragseigenschaft :

Mit der order- Eigenschaft können Sie die Reihenfolge der in einem Flex-Container erscheinenden Flex-Artikel steuern, indem Sie einzelnen Artikeln eine höhere oder niedrigere Reihenfolge zuweisen. Standardmäßig werden alle Artikel in der Quellreihenfolge angeordnet.

Die Flex-Grow- Eigenschaft:

Es definiert die räumliche Verteilung von Flex-Items innerhalb des Flex-Containers . Elemente mit der Eigenschaft flex-grow auf "2" beispielsweise versuchen, doppelt so viel Platz wie die anderen zu belegen. Beachten Sie, dass negative Werte nicht akzeptiert werden.

Die Flex-Shrink- Eigenschaft:

Standardmäßig ist es auf 1 eingestellt. Sie können das Flex-Item bei Bedarf verkleinern.

Die Flex-Basis- Eigenschaft:

Wenn Sie die Größe von flex-items anpassen möchten, insbesondere mit width, verwenden Sie normalerweise nicht die width- Eigenschaft, sondern stattdessen flex-basis . Standardmäßig ist es auf auto eingestellt .

Die Flex- Eigenschaft:

Es ist eine Abkürzung für die Eigenschaften flex-grow , flex-shrink und flex-basis , wobei die letzten beiden Eigenschaften optional sind. Das heißt, wenn Sie die flex- Eigenschaft auf "1" setzen, wird flex-grow auf eins gesetzt, während flex-shrink und flex-basis den Standardwert haben. Es wird empfohlen, diese Abkürzungseigenschaft zu verwenden, anstatt mit all diesen einzelnen Eigenschaften Platz zu beanspruchen.

CSS: Gestalten Sie Ihre Website mit Stil

Wir wissen, dass es viel zu beachten gibt und sind sicher, dass Sie bereit sind, Flexbox in Ihren eigenen Projekten einzusetzen. Aber wir kratzen nur an der Oberfläche dessen, was Flexbox leisten kann!

CSS ist überall. Von der Einstellung des Hintergrundbilds Ihrer Website bis zum Design von Layouts mit CSS-Flexbox hat es die Art und Weise, wie wir das Web verwalten, revolutioniert. All diese wichtigen Eigenschaften werden in Ihrer Webentwicklungsreise sehr nützlich sein. Sie können sogar das, was Sie in diesem Artikel gelernt haben, anwenden, um mit der Erstellung beeindruckender responsiver Layouts zu beginnen. Viel Spaß beim Codieren!