Flexbox - Das ultimative CSS Flex Cheatsheet (mit animierten Diagrammen!)

Dieses umfassende CSS-Flexbox-Cheatsheet enthält alles, was Sie wissen müssen, um Flexbox in Ihren Webprojekten einsetzen zu können.

Mit dem CSS-Flexbox-Layout können Sie HTML einfach formatieren. Mit Flexbox können Elemente mithilfe von Zeilen und Spalten einfach vertikal und horizontal ausgerichtet werden. Gegenstände werden auf verschiedene Größen "gebogen", um den Raum zu füllen. Es erleichtert das reaktionsschnelle Design.

Die CSS-Flexbox eignet sich hervorragend für das allgemeine Layout Ihrer Website oder App. Es ist leicht zu erlernen, wird in allen modernen Browsern unterstützt und es dauert nicht so lange, um die Grundlagen herauszufinden. Am Ende dieses Handbuchs können Sie Flexbox in Ihren Webprojekten verwenden.

Der Artikel enthält hilfreiche animierte Gifs von Scott Domes, mit denen Flexbox noch einfacher zu verstehen und zu visualisieren ist.

Alle CSS Flexbox-Eigenschaften

Hier finden Sie eine Liste aller CSS-Flexbox-Eigenschaften, mit denen Elemente in CSS positioniert werden können. Als nächstes werden Sie sehen, wie sie funktionieren.

CSS, das auf den Container angewendet werden kann

display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow:  ||  justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS, das auf Elemente / Elemente im Container angewendet werden kann

order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis:  | auto; /* default auto */ flex: none | [  ? ||  ] align-self: auto | flex-start | flex-end | center | baseline | stretch;

Terminologie

Bevor Sie lernen, was die Flexbox-Eigenschaften bewirken, ist es wichtig, die zugehörige Terminologie zu verstehen. Hier finden Sie Definitionen der wichtigsten Flexbox-Begriffe aus der offiziellen W3C-Spezifikation für Flexbox.

  • Hauptachse : Die Hauptachse eines Flex-Containers ist die Hauptachse, entlang der Flex-Elemente angeordnet sind. Die Richtung basiert auf der Flex-Direction-Eigenschaft.
  • Hauptstart | Haupt-Ende :Die flexiblen Elemente werden innerhalb des Behälters beginnend auf der Hauptstartseite und in Richtung der Hauptendseite platziert.
  • Hauptgröße : Die Breite oder Höhe eines Flex-Containers oder Flex-Elements, je nachdem, welcher Wert in der Hauptabmessung liegt, entspricht der Hauptgröße dieser Box. Seine Hauptgrößeneigenschaft ist somit entweder seine Breiten- oder Höheneigenschaft, je nachdem, was sich in der Hauptdimension befindet.
  • Querachse : Die zur Hauptachse senkrechte Achse wird als Querachse bezeichnet. Seine Richtung hängt von der Richtung der Hauptachse ab.
  • Cross-Start | Cross-End : Flex-Linien werden mit Gegenständen gefüllt und beginnend auf der Cross-Start-Seite des Flex-Containers in Richtung der Cross-End-Seite in den Container gelegt.
  • Kreuzgröße : Die Breite oder Höhe eines flexiblen Elements, je nachdem, welches sich in der Querabmessung befindet, ist die Kreuzgröße des Elements. Die Eigenschaft für die Kreuzgröße ist diejenige von 'Breite' oder 'Höhe', die sich in der Kreuzdimension befindet.

CSS Display Flex

display: flex Dies sagt Ihrem Browser: "Ich möchte Flexbox mit diesem Container verwenden, bitte."

Ein divElement ist standardmäßig display:block. Ein Element mit dieser Anzeigeeinstellung nimmt die gesamte Breite der Linie ein, auf der es sich befindet. Hier ist ein Beispiel für vier farbige Divs in einem übergeordneten Div mit der Standardanzeigeeinstellung:

Um Flexbox in einem Abschnitt Ihrer Seite zu verwenden, konvertieren Sie zuerst den übergeordneten Container in einen Flex-Container, indem Sie ihn display: flex;zum CSS des übergeordneten Containers hinzufügen .

Dadurch wird dieser Container als Flex-Container initialisiert und einige Standard-Flex-Eigenschaften angewendet.

Flex Richtung

flex-directionMit dieser Option können Sie steuern, wie die Elemente im Container angezeigt werden. Möchten Sie sie von links nach rechts, von rechts nach links, von oben nach unten oder von unten nach oben? Sie können all dies einfach tun, indem Sie flex-directionden Container einstellen .

Die Standardanordnung nach dem Anwenden display: flexist, dass die Elemente entlang der Hauptachse von links nach rechts angeordnet werden. Die folgende Animation zeigt, was passiert, wenn flex-direction: columndem Containerelement hinzugefügt wird.

Sie können auch flex-directionauf row-reverseund einstellen column-reverse.

Inhalt begründen

justify-contentist eine Eigenschaft zum Ausrichten von Elementen im Container entlang der Hauptachse (siehe Terminologiediagramm oben). Dies ändert sich je nachdem, wie der Inhalt angezeigt wird. Es ermöglicht uns, jeden leeren Raum in Zeilen zu füllen und zu definieren, wie wir ihn "rechtfertigen" möchten.

Hier sind unsere häufigsten Optionen zur Rechtfertigung von Inhalten : flex-start | flex-end | center | space-between | space-around.

So sehen die verschiedenen Optionen aus:

space-betweenverteilt Elemente so, dass das erste Element bündig mit dem Anfang und das letzte bündig mit dem Ende ist. space-aroundist ähnlich, aber die Gegenstände haben an beiden Enden einen halben Platz.

Flex Elemente ausrichten

align-itemsermöglicht es uns, Elemente entlang der Querachse auszurichten (siehe Terminologiediagramm oben). Auf diese Weise können Inhalte auf viele verschiedene Arten positioniert werden, indem Inhalte gerechtfertigt und Elemente miteinander ausgerichtet werden.

Hier sind die am häufigsten verwendeten Optionen zum Ausrichten von Elementen: flex-start | flex-end | center | baseline | stretch

Damit stretchSie wie erwartet arbeiten können, muss die Höhe der Elemente autoanstelle einer bestimmten Höhe festgelegt werden.

Diese Animation zeigt, wie die Optionen aussehen:

Jetzt verwenden wir beide justify-contentund align-items. Dies zeigt den Unterschied zwischen den Hauptachsen und den Querachsen.

Richten Sie sich aus

align-self Mit dieser Option können Sie die Ausrichtung eines einzelnen Elements anpassen.

Es hat alle die gleichen Eigenschaften von align-items.

In the following animation, the parent div has the CSS align-items: center and flex-direction: row. The first two squares cycle through different align-self values.

Flex Wrap

Flexbox by default will try to fit all elements into one row. However, you can change this with the flex-wrap property. There are three values you can use to determine when elements go to another row.

The default value is flex-wrap: nowrap. This will cause everything to stay in one row from left to right.

flex-wrap: wrap  will allow items to pop to the next row if there is not enough room on the first row. The items will be displayed from left to right.

flex-wrap: wrap-reverse also allows items to pop to the next row but this time the items are displayed from right to left.

Flex Flow

flex-flow combines the use of flex-wrap and flex-direction into one property. It is used by first setting the direction and then the wrap. Here is an example: flex-flow: column wrap;

Align Content

align-content is used for aligning items with multiple lines. It is for aligning on the cross axis and will have no effect on content that is one line.

Here are the options: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Vertically Centering with Flexbox

If you want to vertically center all the contents inside a parent element, use align-items. Here is the code to use:

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

Games and Apps

If you want to practice using flexbox, try out these games and apps that will help you master flexbox.

  • Flexbox Defense is a web game where you learn flexbox while trying to stop the incoming enemies from getting past your defenses.
  • Flexbox Froggy is a game where you help Froggy and friends by writing CSS code.
  • Flexyboxes is an app that allows you to see code samples and change parameters to see how Flexbox works visually.
  • Flexbox Patters is a website that shows off a bunch of Flexbox examples.

Conclusion

We've covered all the most common CSS flexbox properties. The next step is practice! Try making a few projects using flexbox so you can get used to how it works.