Lernen Sie die grundlegende Flexbox in nur 10 Minuten

Was ist Flexbox?

Flexbox, kurz für „Flexible Box“, ist ein in CSS3 eingeführter Layoutmodus, der bestimmt, wie Elemente auf einer Seite so angeordnet sind, dass sie sich unter verschiedenen Bildschirmgrößen und Geräten vorhersehbar verhalten.

Es wird Flexbox genannt, da es Elemente innerhalb der Flexbox erweitern und verkleinern kann, um den verfügbaren Platz optimal auszufüllen. Im Vergleich zu älteren Layoutmethoden wie Anzeigetabellen und schwebenden Inline-Blöcken bietet Flexbox eine leistungsstärkere Möglichkeit:

  • Legen Sie Elemente in verschiedene Richtungen aus
  • Ordnen Sie die Anzeigereihenfolge der Elemente neu an
  • Ändern Sie die Ausrichtung der Elemente
  • Elemente dynamisch in den Container einpassen

Wann sollte Flexbox nicht verwendet werden?

Flexbox eignet sich hervorragend zum Skalieren, Ausrichten und Neuanordnen von Elementen. Vermeiden Sie es jedoch, es für Folgendes zu verwenden:

  • Gesamtseitenlayout
  • Websites, die alte Browser vollständig unterstützen

Ältere Browser wie IE 11 oder niedriger unterstützen Flexbox nicht oder nur teilweise. Wenn Sie auf Nummer sicher gehen möchten, sollten Sie auf andere CSS-Layoutmethoden zurückgreifen, z. B. display: inline-blockmit floatund display: table.

Wenn Sie jedoch nur auf moderne Browser abzielen, ist Flexbox auf jeden Fall einen Blick wert.

Terminologie

Im Flexbox-Modell gibt es drei Kernkonzepte:

  • Flex Items, die Elemente, die ausgelegt werden müssen
  • Flex-Container, der Flex-Artikel enthält
  • Flussrichtung, die die Layoutrichtung von Flex-Elementen bestimmt

Menschen lernen am besten aus Erfahrungen und Beispielen, also fangen wir an!

Stufe 1 - Grundkenntnisse

1) Erstellen eines Flex-Containers

.flex-container { display: flex;}

Um einen Flex-Container zu erstellen, müssen Sie die display: flexEigenschaft nur einem Element hinzufügen . Standardmäßig werden alle direkten untergeordneten Elemente als flexible Elemente betrachtet und horizontal in einer einzelnen Reihe von links nach rechts angeordnet. Wenn die Gesamtbreite der Flex-Elemente größer als der Container ist, werden die Elemente so verkleinert, dass sie in den Container passen.

2) Fügen Sie flexible Elemente in eine einzelne Spalte ein

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

Flex-Elemente können durch Einstellen vertikal angeordnet werden flex-direction: column. Es ist auch möglich, sie durch Einstellen von flex-direction: column-reverseoder in umgekehrter Reihenfolge anzuordnen flex-direction: row-reverse.

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

Level 2 - Anfänger

1) Richten Sie die Flex-Elemente rechts aus

.flex-container { display: flex; justify-content: flex-end;}

Denken Sie daran, dass es für jedes Flexbox-Modell eine Flex-Richtung gibt. justify-contentwird verwendet, um anzugeben, wo die Flex-Elemente entlang der Flex-Richtung platziert werden sollen. Im obigen Beispiel justify-content: flex-endbedeutet dies , dass Elemente in horizontaler Richtung bis zum Ende des Flex-Containers ausgerichtet sind. Deshalb sind sie rechts platziert.

2) Flexelemente in der Mitte ausrichten

.flex-container { display: flex; justify-content: center;}

3) Verteilen Sie die flexiblen Elemente

Sie können festlegen, wie viel Platz zwischen Elementen in einem Container angezeigt werden soll, indem Sie einen von drei möglichen Abstandswerten für die justify-contentEigenschaft verwenden:

  • space-evenly: Der Abstand zwischen der Startkante des Containers und dem ersten Artikel entspricht dem Abstand zwischen jedem Artikel und dem angrenzenden Artikel.
  • space-between: Der Abstand zwischen zwei benachbarten Elementen ist gleich, aber nicht unbedingt gleich dem Abstand zwischen dem ersten / letzten Element und seiner nächsten Kante. Der Abstand zwischen der Startkante und dem ersten Element entspricht dem Abstand zwischen der Endkante und dem letzten Element.
  • space-around: Der Abstand auf jeder Seite eines Elements ist für jedes Element im Container gleich. Beachten Sie, dass dies bedeutet, dass der Abstand zwischen zwei benachbarten Elementen doppelt so groß ist wie der Abstand zwischen dem ersten / letzten Element und seiner nächsten Kante.

4) Richten Sie die Flex-Elemente in einer zweiten Richtung aus

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

Normalerweise möchten wir Elemente entlang der Flexrichtung auslegen und gleichzeitig die Elemente in der Richtung senkrecht dazu ausrichten. Durch Einstellen von justify-content: centerund align-items: centerkönnen Flex-Elemente sowohl horizontal als auch vertikal in der Mitte des Flex-Containers platziert werden.

5) Richten Sie ein bestimmtes Flex-Element aus

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

Mithilfe der align-selfCSS-Eigenschaft für dieses Element kann ein bestimmtes Flex-Element anders als die anderen im Container ausgerichtet werden .

Stufe 3 - Mittelstufe

1) Lassen Sie Flex-Elemente in andere Zeilen / Spalten einbrechen

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

Standardmäßig dürfen Flex-Elemente nicht umbrochen werden, und ihre Größe wird so angepasst, dass sie in eine einzelne Zeile oder Spalte passen, wenn der Flex-Container nicht für alle groß genug ist. Durch Hinzufügen flex-wrap: wrapwerden Flex-Elemente, die den Container überlaufen würden, in eine andere Zeile eingewickelt.

2) Umwickeln

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

Flex-Elemente sind immer noch in mehreren Reihen angeordnet flex-wrap: wrap-reverse, beginnen jedoch am Ende des Flex-Containers.

3) Begründen Sie die Position der Linien von Elementen

.flex-container { display: flex; flex-wrap: wrap; align-content: flex-start;}

Standardmäßig werden Reihen von Flex-Elementen, die umwickelt werden, gestreckt, um den gesamten verbleibenden Platz mit gleichem Abstand zwischen benachbarten Reihen einzunehmen. Sie können align-contentden Flex-Container festlegen, um die Position der Zeilen beim Umbrechen zu bestimmen. Mögliche Werte sind flex-start, flex-end, center, space-between, space-aroundund stretch(Standard).

Stufe 4 - Fortgeschritten

1) Erweitern Sie Elemente

.flex-container { display: flex;}
.flex-item.nth-of-type(1){ flex-grow: 1;}
.flex-item.nth-of-type(2) { flex-grow: 2;}

flex-growwird nur wirksam, wenn im flexiblen Container noch Platz ist. Die flex-growEigenschaft eines Flex-Elements gibt an, um wie viel sich ein Element im Vergleich zu den anderen Elementen ausdehnt, um das Flex-Feld zu füllen. Die Standardeinstellung ist 1. Wenn der Wert auf 0 gesetzt ist, wächst das Element nicht, um den verbleibenden Platz zu füllen. In diesem Beispiel beträgt das Verhältnis zweier Elemente 1: 2, was bedeutet, dass das erste Element ⅓ einnimmt, während das zweite Element ⅔ des verbleibenden Platzes einnimmt.

2) Elemente verkleinern

.flex-container { display: flex;}
.flex-item:nth-of-type(1) { flex-shrink: 1;}
.flex-item:nth-of-type(2) { flex-shrink: 2;}

flex-shrinkwird nur wirksam, wenn die Flex-Elemente aufgrund des unzureichenden Platzes über den Flex-Container laufen. Es gibt an, um wie viel ein Element im Vergleich zu den anderen Elementen schrumpft, damit die Elemente die Flexbox nicht überlaufen. Der Standardwert ist 1. Wenn der Wert auf 0 gesetzt ist, wird das Flex-Element überhaupt nicht verkleinert. In diesem Beispiel beträgt das Verhältnis 1: 2, was bedeutet, dass das erste Element um ⅓ verkleinert wird, während das zweite Element um ⅔ des übergelaufenen Raums verkleinert wird.

3) Stellen Sie die Größe der Elemente ein

.flex-container { display: flex;}
.flex-item.nth-of-type(1) { flex-basis: 200px;}
.flex-item.nth-of-type(2) { flex-basis: 10%;}

Anstatt die Anfangsgröße eines Elements zu verwenden, können Sie seine Größe mit anpassen flex-basis. Standardmäßig lautet flex-basis: autoder Wert: Dies bedeutet die Größe, die aus Nicht-Flexbox-CSS-Regeln berechnet wird. Sie können auch einen absoluten Wert oder einen Wert festlegen, der einen Prozentsatz des Flex-Containers darstellt. zum Beispiel flex-basis: 200pxund flex-basis: 10%.

4) Fügen Sie Flex-Grow, Flex-Shrink und Flex-Basis zusammen

.flex-container { display: flex;}
.flex-item:nth-of-type(1) { flex: 1 0 100px;}
.flex-item:nth-of-type(2) { flex: 2 0 10%;}

flexist eine Abkürzung für flex-grow, flex-shrinkund flex-basis. In diesem Beispiel ist das erste Flex-Element festgelegtflex-grow=1, flex-shrink=0,flex-basis=100px Und die zweite Flexpunkt ist eingestellt zu seinflex-grow=2, flex-shrink=0,flex-basis=10% . In diesem Fall flex-growwirkt sich der verbleibende Platz im Flex-Container nur aus und flew-shrinkwird ignoriert.

Fazit

Flexbox ist leicht zu erlernen und zu manipulieren. Das Wissen über seine Verwendung ist besonders hilfreich, da der Webentwicklungszyklus kurz und die Iterationen schnell sind. Wenn Sie mehr mit Flexbox experimentieren möchten, bevor Sie es in Ihren Projekten verwenden, können Sie Flexyboxes und Flexbox Froggy zum Üben besuchen. Sie können auch mehr über CSS-Tricks lesen: Eine Anleitung zu Flexbox und W3C: CSS Flexible Box.

Dieser Artikel wurde ursprünglich im Blog von Altitude Labs veröffentlicht und von unserem Softwareentwickler Felix Yau verfasst. Altitude Labs ist eine Softwareagentur, die sich auf personalisierte React-Apps für Mobilgeräte spezialisiert hat.