Wie Flexbox funktioniert - erklärt mit großen, farbenfrohen, animierten Gifs

Flexbox verspricht, uns vor den Übeln des einfachen CSS (wie der vertikalen Ausrichtung) zu bewahren.

Nun, Flexbox erreicht dieses Ziel. Das Beherrschen seines neuen mentalen Modells kann jedoch eine Herausforderung sein.

Schauen wir uns also animiert an, wie Flexbox funktioniert, damit wir damit bessere Layouts erstellen können.

Das Grundprinzip von Flexbox besteht darin, Layouts flexibel und intuitiv zu gestalten.

Um dies zu erreichen, können Container selbst entscheiden, wie sie ihre Kinder gleichmäßig verteilen möchten - einschließlich ihrer Größe und des Abstands zwischen ihnen.

Das klingt alles im Prinzip gut. Aber mal sehen, wie es in der Praxis aussieht.

In diesem Artikel werden wir uns mit den 5 häufigsten Flexbox-Eigenschaften befassen. Wir werden untersuchen, was sie tun, wie Sie sie verwenden können und wie ihre Ergebnisse tatsächlich aussehen werden.

Eigenschaft 1: Anzeige: Flex

Hier ist unsere Beispielwebseite:

Sie haben vier farbige Divs in verschiedenen Größen, die in einem grauen Container-Div enthalten sind. Ab sofort ist jeder Div standardmäßig auf eingestellt display: block. Jedes Quadrat nimmt somit die volle Breite seiner Linie ein.

Um mit Flexbox zu beginnen, müssen Sie Ihren Container in einen Flex-Container verwandeln . Das ist so einfach wie:

#container { display: flex;}

Es hat sich nicht viel geändert - Ihre Divs werden jetzt inline angezeigt, aber das war's auch schon. Aber hinter den Kulissen haben Sie etwas Mächtiges getan. Sie haben Ihren Quadraten einen so genannten Flex-Kontext gegeben .

Sie können sie jetzt in diesem Kontext positionieren, und das mit weitaus weniger Schwierigkeiten als bei herkömmlichem CSS.

Eigenschaft 2: Flex-Richtung

Ein Flexbox-Container hat zwei Achsen: eine Hauptachse und eine Querachse , die standardmäßig so aussehen:

Standardmäßig sind Elemente entlang der Hauptachse von links nach rechts angeordnet . Aus diesem Grund haben Ihre Quadrate nach dem Anwenden standardmäßig eine horizontale Linie verwendet display: flex.

Flex-directionLassen Sie uns jedoch die Hauptachse drehen.

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

Hier ist ein wichtiger Unterschied zu machen: flex-direction: columnRichtet die Quadrate nicht auf der Querachse statt auf der Hauptachse aus. Dadurch bewegt sich die Hauptachse selbst von horizontal nach vertikal.

Es gibt noch einige andere Optionen für die Flex-Richtung: Zeilenumkehr und Spaltenumkehr.

Eigenschaft 3: Inhalt begründen

Inhalt ausrichten steuert, wie Sie Elemente auf der Hauptachse ausrichten .

Hier tauchen Sie etwas tiefer in die Unterscheidung zwischen Haupt- und Querachse ein. Kehren wir zunächst zur Flex-Richtung zurück: row.

#container { display: flex; flex-direction: row; justify-content: flex-start;}

Sie haben fünf Befehle zur Verfügung, um den Rechtfertigungsinhalt zu verwenden :

  1. Flex-Start
  2. Flex-Ende
  3. Center
  4. Zwischenraum
  5. Raum um

Raum um und Raum dazwischen sind am wenigsten intuitiv. Zwischenraum gibt den gleichen Abstand zwischen jedem Quadrat an, jedoch nicht zwischen ihm und dem Container.

Space-around platziert auf beiden Seiten des Quadrats ein gleiches Raumkissen - was bedeutet, dass der Abstand zwischen den äußersten Quadraten und dem Container halb so groß ist wie der Abstand zwischen zwei Quadraten (jedes Quadrat trägt zu einem nicht überlappenden gleichen Rand bei). damit den Raum verdoppeln).

Ein letzter Hinweis: Denken Sie daran, dass der Rechtfertigungsinhalt entlang der Hauptachse funktioniert und die Flex-Richtung die Hauptachse wechselt . Dies ist wichtig, wenn Sie zu ...

Eigenschaft 4: Elemente ausrichten

Wenn Sie Begründungsinhalte erhalten, ist das Ausrichten von Elementen ein Kinderspiel.

Da der Ausrichtungsinhalt entlang der Hauptachse funktioniert, gelten Ausrichtungselemente für die Querachse.

Lassen Sie uns unsere Flex-Richtung auf Row zurücksetzen , damit unsere Achsen genauso aussehen wie im obigen Bild.

Lassen Sie uns dann in die Befehle zum Ausrichten von Elementen eintauchen.

  1. Flex-Start
  2. Flex-End
  3. Center
  4. strecken
  5. Grundlinie

Die ersten drei sind genau die gleichen wie Rechtfertigungsinhalte , also hier nichts Besonderes.

Die nächsten beiden sind jedoch etwas anders.

Sie haben eine Dehnung, bei der die Elemente die gesamte Querachse einnehmen, und eine Grundlinie, bei der der untere Rand der Absatz-Tags ausgerichtet ist.

(Beachten Sie, dass align-items: stretchich für die Höhe der Quadrate auf auto setzen musste. Andernfalls würde die Eigenschaft height die Dehnung überschreiben.)

Beachten Sie bei der Grundlinie, dass beim Entfernen der Absatz-Tags stattdessen der untere Rand der Quadrate wie folgt ausgerichtet wird:

Um die Haupt- und Querachse besser zu demonstrieren, kombinieren wir Begründungsinhalt und Ausrichtungselemente und sehen, wie die Zentrierung für die beiden Flex-Direction-Befehle unterschiedlich funktioniert:

Bei der Reihe werden die Quadrate entlang einer horizontalen Hauptachse angeordnet. Mit Säule fallen sie entlang einer vertikalen Hauptachse.

Selbst wenn die Quadrate in beiden Fällen sowohl vertikal als auch horizontal zentriert sind, sind die beiden nicht austauschbar!

Eigenschaft Nr. 5: Selbst ausrichten

Mit Align-Self können Sie die Ausrichtung eines bestimmten Elements manuell bearbeiten.

Grundsätzlich werden Align -Elemente für ein Quadrat überschrieben . Alle Eigenschaften sind gleich, obwohl standardmäßig auto verwendet wird , wobei den Ausrichtungselementen des Containers gefolgt wird.

#container { align-items: flex-start;}
.square#one { align-self: center;}// Only this square will be centered.

Mal sehen, wie das aussieht. Sie wenden align-self auf zwei Quadrate an, und für den Rest wenden Sie align-items: centerund an flex-direction: row.

Fazit

Obwohl wir gerade die Oberfläche von Flexbox zerkratzt haben, sollten diese Befehle ausreichen, um die meisten grundlegenden Ausrichtungen zu handhaben - und vertikal nach Herzenslust auszurichten.

Wenn Sie weitere GIF Flexbox-Tutorials sehen möchten oder wenn dieses Tutorial für Sie hilfreich war, klicken Sie auf das grüne Herz unten oder hinterlassen Sie einen Kommentar.

Danke fürs Lesen!