Der ultimative Leitfaden für Flexbox - Lernen anhand von Beispielen

Was ist der beste Weg, um Flexbox zu verstehen ? Lerne die Grundlagen und baue dann viele Dinge. Und genau das werden wir in diesem Artikel tun.

Ein paar Dinge zu beachten

  • Dieser Artikel wurde für fortgeschrittene Entwickler geschrieben und setzt voraus, dass Sie bereits ein wenig über Flexbox wissen. Aber…
  • Wenn Sie etwas CSS kennen, aber Flexbox überhaupt nicht kennen, habe ich hier einen umfassenden Leitfaden geschrieben (kostenloser Artikel, 46 Minuten lesen).
  • Und wenn Sie CSS nicht sehr gut kennen, empfehle ich meine vollständige (praktische) Einführung in CSS (kostenpflichtiger Kurs mit 74 Lektionen).
  • Sie müssen den Beispielen in diesem Artikel nicht in der hier angegebenen Reihenfolge folgen.
  • Flexbox ist nur eine Layout-Technik. Projekte in der realen Welt erfordern mehr als nur Layouts.
  • Wenn Sie eine Notation sehen, wie div.ohanssie sich auf ein div mit dem Klassennamen von beziehtohans

Beispiel 1: Erstellen einer Fotogalerie mit Flexbox

Das Ausführen von Fotos in Zeilen und Spalten mit Flexbox ist einfacher als die meisten Personen glauben.

Betrachten Sie ein einfaches Markup wie folgt:

Wir haben 10 Bilder innerhalb eines main.gallery.

Angenommen, das main.gallerywurde so gestaltet, dass es den verfügbaren Bildschirm abdeckt.

.gallery { min-height: 100vh}

Ein kurzer Hinweis zu Bildern

Standardmäßig sind Bilder inline-blockElemente. Sie haben eine Breite und Höhe. Sie bleiben in einer Linie, es sei denn, die Größe ist eingeschränkt, z. B. wenn die Bilder zu groß sind, um in eine Linie zu passen.

Der Startpunkt

Alles zusammen ergibt das Ergebnis aller oben genannten Markups und Stile Folgendes:

Holen Sie sich jetzt Flexbox in die Szene:

.gallery { display: flex }

Zu diesem Zeitpunkt hat sich das Standardverhalten der Bilder geändert. Sie werden vom inline-blockElement zum Seinflex-items.

Aufgrund des darin initiierten Flexbox-Kontexts .gallerywerden die Bilder jetzt in eine einzelne Zeile gequetscht. Außerdem würden sie sich wie folgt entlang der Vertikalen erstrecken:

Dies ist ein Ergebnis des Flexbox-Standardverhaltens:

  1. Drücken Sie alle untergeordneten Elemente in eine einzelne Zeile. Wickeln Sie die Elemente nicht ein.

Das ist schlecht für eine Galerie, also ändern wir dieses Verhalten wie folgt:

.gallery { flex-wrap: wrap}

Dadurch werden die Elemente nun umbrochen und gegebenenfalls in mehrere Zeilen unterteilt.

2. Die Bilder werden jetzt in die nächste Zeile umgebrochen. Aber sie noch strecken entlang der Vertikalen. Wir wollen dieses Verhalten sicherlich nicht , da es die Bilder verzerrt.

Das stretchVerhalten ist auf den Standardwert align-itemsfür flexContainer zurückzuführen.

align-items: stretch

Lassen Sie uns das ändern:

.gallery { ... align-items: flex-start}

Dadurch wird verhindert, dass sich die Bilder dehnen. Sie übernehmen ihre Standardeinstellungen widthund height Werte.

Sie werden auch wie unten gezeigt am Anfang der vertikalen Achse ausgerichtet:

Jetzt haben wir unsere Flexbox-Galerie.

Der Vorteil der Verwendung von Flexbox

Zu diesem Zeitpunkt bietet die Verwendung von Flexbox keinen großen Vorteil. Wir haben das gleiche Aussehen wie vor der Einführung des Flexbox- Modells.

Neben der kostenlosen Bereitstellung einer reaktionsschnellen Galerie ergeben sich die weiteren Vorteile der Verwendung von Flexbox aus den damit verbundenen Ausrichtungsoptionen.

Denken Sie daran, dass der Flex-Container .gallerydie folgenden Eigenschaftswerte annimmt. flex-direction: rowjustify-content: flex-startundalign-items: flex-start.

Das Layout der Galerie kann sofort geändert werden, indem Sie mit den folgenden Standardwerten spielen:

.gallery { ... justify-content:center;}

Wie im obigen Bild zu sehen, werden die Bilder in der Mitte entlang der Horizontalen ausgerichtet:

.gallery { ... justify-content:center; align-items: center;}

Wie im obigen Bild zu sehen, richten Sie die Bilder sowohl horizontal als auch vertikal zur Mitte von aus .gallery

Mit Flexbox kommen viele Ausrichtungsoptionen. Fühlen Sie sich frei, mit einigen weiteren Ausrichtungsoptionen zu spielen, wenn Sie dies für richtig halten.

Sie können die aktuelle Flexbox-Galerie in diesem CodePen anzeigen.

Beispiel 2: Erstellen von Karten mit Flexbox

Karten sind im Internet populär geworden. Google, Twitter, Pinterest und anscheinend alle anderen wechseln zu Karten.

Eine Karte ist ein UI-Entwurfsmuster, das verwandte Informationen in einem Container mit flexibler Größe gruppiert. Es ähnelt optisch einer Spielkarte.

Es gibt viele gute Verwendungsmöglichkeiten für Karten. Ein häufiges ist das berüchtigte Preisraster.

Lass uns eins bauen.

Das Markup

Jede Karte erhält ein Markup wie folgt:

    Es gibt mindestens 3 Karten. Wickeln Sie die Karten in adiv.cards

    Jetzt haben wir ein übergeordnetes Element.

    In diesem Beispiel wurde das übergeordnete Element so eingerichtet, dass es das gesamte Ansichtsfenster ausfüllt.

    .cards { min-height: 100vh}

    Richten Sie die Flexbox ein

    Der folgende Codeblock initiiert einen Flexbox-Formatierungskontext innerhalb .cards

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

    Wenn Sie sich an das letzte Beispiel erinnern, können Sie flex-wrapin eine flex-itemsandere Zeile einbrechen.

    Dies geschieht, wenn die untergeordneten Elemente nicht in das übergeordnete Element passen. Dies ist auf die größere berechnete Breite der kombinierten untergeordneten Elemente zurückzuführen.

    Gehen Sie voran und geben Sie die .cardAnfangsbreite an.

    Verwenden der Flexbox:

    .card { flex: 0 0 250px}

    Dadurch werden die Werte flex-growund flex-shrinkauf gesetzt 0. Der flex-basisWert wird auf gesetzt250px

    Zu diesem Zeitpunkt werden die Karten am Anfang der Seite ausgerichtet. Sie erstrecken sich auch entlang der Vertikalen.

    In einigen Fällen kann dies ideal für Ihren Anwendungsfall sein. In den meisten Fällen wird dies jedoch nicht der Fall sein.

    Das Standardverhalten von Flex-Containern

    Das obige Ergebnis ist auf das Standardverhalten von Flex-Containern zurückzuführen.

    Die Karten beginnen am Anfang der Seite auf der, top leftweil justify-contentauf den Wert gesetzt ist flex-start.

    Auch erstrecken sich die Karten über die gesamte Höhe des übergeordneten Elements zu füllen , da align-itemsist auf stretchder Standardeinstellung.

    Ändern der Standardwerte

    Wir können beeindruckende Ergebnisse erzielen, indem wir die von Flexbox angebotenen Standardwerte ändern.

    Siehe unten:

    Informationen zum Anzeigen des endgültigen Projekts finden Sie in diesem CodePen.

    Beispiel 3: Erstellen von Grids mit Flexbox

    Ganze CSS-Frameworks bauen auf dem in diesem Beispiel zu diskutierenden Konzept auf. Es ist ziemlich wichtiges Zeug.

    Was ist ein Gitter?

    Ein Raster ist eine Reihe sich schneidender gerader vertikaler und horizontaler Hilfslinien, die zum Strukturieren von Inhalten verwendet werden.

    Wenn Sie mit CSS-Frameworks wie Bootstrap vertraut sind, haben Sie bereits Grids verwendet.

    Ihr Kilometerstand kann unterschiedlich sein, in diesem Beispiel werden jedoch unterschiedliche Rastertypen berücksichtigt.

    Beginnen wir mit dem ersten,Grundgitter .

    Grundgitter

    Dies sind Gitter mit folgenden Eigenschaften:

    • Die Gitterzellen sollten gleichmäßig verteilt sein und sich so erweitern, dass sie in die gesamte Zeile passen.
    • Die Gitterzellen sollten gleich hoch sein.

    Dies ist mit Flexbox leicht zu erreichen. Betrachten Sie das folgende Markup:

     1 

    Jeder .rowwird sein eigener Flex-Container sein.

    Jedes Element in wird .rowdann zu einem flexiblen Element. Alle Flex-Elemente verteilen sich gleichmäßig über die Reihe.

    Von Natur aus sollte es keine Rolle spielen, ob wir 3 untergeordnete Elemente haben

     1/3 1/3 1/3 

    Oder 6 untergeordnete Elemente

     1/6 1/6 1/6 1/6 1/6 1/6 

    Oder 12 Elemente

     1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 

    Die Lösung

    Dazu sind es nur zwei Schritte.

    1. Initiieren Sie einen Flexbox-Formatierungskontext:
    .row { display: flex;}

    2. Lassen Sie jede flex-itemErweiterung zu gleichen Anteilen auf die gesamte Reihe passen:

    .row_cell { flex: 1}

    Und das ist es.

    Die Lösung erklärt.

    flex: 1

    flexist eine Abkürzung für den Eigenschaftsnamen zum Festlegen von drei unterschiedlichen Flexbox-Eigenschaften flex-grow, flex-shrinkund flex-basis, in der angegebenen Reihenfolge.

    flex: 1hat nur den Wert 1eingestellt. Dieser Wert wird der flex-grow Immobilie zugeordnet.

    Die flex-shrinkund flex-basisEigenschaften werden eingestellt 1und 0.

    flex: 1 === flex: 1 1 0

    Gitterzellen mit bestimmten Größen

    Manchmal ist das, was Sie wollen, keine Gitterreihe gleicher Zellen.

    Möglicherweise möchten Sie Zellen, die doppelt so groß sind wie die anderen Zellen, oder einen beliebigen Bruchteil.

    Die Lösung ist ziemlich einfach.

    Fügen Sie diesen spezifischen Gitterzellen eine Modifikatorklasse wie folgt hinzu:

    .row_cell--2 { flex: 2}

    Lassen Sie die Klasse in das Markup aufnehmen. Siehe das erste Kind divim Markup unten:

     2x 1/3 1/3 

    Die Zelle mit der Klasse .row__cell--2ist das Zweifache der Standardzellen.

    Für eine Zelle, die das Dreifache des verfügbaren Speicherplatzes einnimmt:

    .row_cell--3 {

    flex: 3

    }

    Gitterzellen mit spezifischen Ausrichtungen

    Dank Flexbox muss nicht jede Zelle an einen bestimmten Ausrichtungswert gebunden sein. Sie können die spezifische Ausrichtung für jede Zelle angeben.

    Verwenden Sie dazu folgende Modifikatorklassen:

    .row_cell--top { align-self: flex-start}

    Dadurch wird die spezifische Zelle oben am ausgerichtet row.

    Sie müssen die Klasse auch zu der bestimmten Zelle im Markup hinzugefügt haben. Siehe das erste Kind divim Markup unten:

    Nachfolgend sind die anderen verfügbaren Ausrichtungsoptionen aufgeführt:

    .row_cell--bottom { align-self: flex-end}
    .row_cell--center { align-self: center}

    Gesamtausrichtung innerhalb der Zeilen

    So wie bestimmte Zellen ausgerichtet werden können, können auch die gesamten untergeordneten Elemente in der Zeile ausgerichtet werden.

    Verwenden Sie dazu eine Modifikatorklasse wie folgt:

    .row--top { align-items: flex-start}

    Es ist wichtig zu beachten, dass die Modifikatorklasse .row--topdem rowoder dem übergeordneten Element hinzugefügt werden mussflex-container

    Die anderen Ausrichtungsoptionen sind unten aufgeführt:

    .row--center { align-items: center}
    .row--bottom { align-items: flex-end}

    Verschachtelte Gitter

    Ohne etwas Besonderes zu tun, können diese in rowssich selbst verschachtelt werden.

    Sie können die hier erstellten endgültigen Raster anzeigen.

    Noch mehr Gitter

    Während Sie mit vertikalen Flexbox-Gittern und noch komplexeren Konfigurationen ausgefallene Gebäudegitter erhalten können, verwenden Sie das beste Werkzeug für diesen Job. Lernen, beherrschen und verwenden Sie das CSS-Grid-Layout. Es ist die ultimative CSS-Lösung für Grids.

    Beispiel 4: Erstellen von Website-Layouts mit Flexbox

    Die Community runzelt im Allgemeinen die Stirn, wenn sie Flexbox für vollständige Weblayouts verwendet.

    Obwohl ich damit einverstanden bin, denke ich auch, dass Sie in bestimmten Fällen damit durchkommen können.

    Der wichtigste Rat, den ich hier geben kann, wäre:

    Verwenden Sie Flexbox dort, wo es Sinn macht

    Ich werde diese Aussage im folgenden Beispiel erklären.

    Das Layout des Heiligen Grals

    Gibt es ein besseres Website-Layout als den berüchtigten „ Heiligen Gral “?

    Es gibt zwei Möglichkeiten, dieses Layout mit Flexbox zu erstellen.

    Das erste ist, das Layout mit Flexbox erstellen zu lassen. Platzieren Sie den header, footer, nav, articleund asidealles in einem flex-container.

    Beginnen wir damit.

    Das Markup

    Betrachten Sie das grundlegende Markup unten:

     Header  Article Nav Aside  Footer

    Unter anderem gibt es eine bestimmte Regel, an die sich der Heilige Gral hält. Diese Regel hat das obige Markup inspiriert:

    Die mittlere Spalte articlesollte zuerst im Markup vor den beiden Seitenleisten navund angezeigt werden aside.

    Initiieren Sie den Flexbox-Formatierungskontext

    body { display: flex}

    Da die untergeordneten Elemente von oben nach unten gestapelt werden sollen, muss die Standardrichtung der Flexbox geändert werden.

    body { ... flex-direction: column}

    1 . headerund footersollte eine feste Breite haben.

    header,footer { width: 20vh /*you can use pixels e.g. 200px*/}

    2.main muss gemacht werden, um den verfügbaren verbleibenden Platz innerhalb der zu füllenflex-container

    main { flex: 1}

    Vorausgesetzt , dass Sie nicht vergessen, flex: 1entspricht flex-grow: 1, flex-shrink: 1undflex-basis: 0

    An diesem Punkt müssen wir kümmern uns um die Inhalte nehmen innerhalb maindavon article, navund aside.

    Einrichten mainals flex-container:

    main { display: flex}

    Haben Sie die navund asidenehmen Sie feste Breiten auf:

    nav,aside { width: 20vw}

    Stellen Sie sicher, dass articleder verbleibende verfügbare Speicherplatz belegt ist:

    article { flex: 1}

    Jetzt gibt es nur noch eine Sache zu tun.

    Nachbestellen der flex-itemsso navwird zuerst angezeigt:

    nav { order: -1}

    Die orderEigenschaft wird verwendet, um die Position von neu zu ordnen flex-items.

    Alle flex-itemsinnerhalb eines Containers werden in steigendenorder Werten angezeigt . Die flex-itemmit den niedrigsten orderWerten erscheinen zuerst.

    Alle flex-itemshaben einen Standardwert ordervon 0.

    Das Holy Grail Layout (eine andere Lösung)

    Die vorherige Lösung verwendete a flex-containerals Gesamtbehälter. Das Layout ist stark von Flexbox abhängig.

    Lassen Sie uns einen „vernünftigeren“ Ansatz sehen. Schauen Sie sich das vermeintliche Endergebnis noch einmal an:

    headerund footerkönnte als Blockelemente behandelt werden. Ohne Eingreifen füllen sie die Breite ihres enthaltenen Elements aus und stapeln von oben nach unten.

     Header  Article Nav Aside  Footer

    Mit diesem Ansatz flex-containerwäre das einzig Notwendige main.

    Die einzigartige Herausforderung bei diesem Ansatz besteht darin, dass Sie die Höhe Ihrer selbst berechnen müssen main. mainsollte den verfügbaren Platz neben dem Platz füllen, den das headerund einnimmtfooter.

    main { height: calc(100vh - 40vh);}

    Betrachten Sie den obigen Codeblock. Es verwendet die CSS- calcFunktion, um die Höhe von zu berechnenmain.

    Unabhängig von Ihrem Kilometerstand muss die Höhe maingleich seincalc(100vh — height of header — height of footer ).

    Wie in der vorherigen Lösung, müssen Sie gegeben haben , headerund footereine feste Höhe. Gehen Sie dann maingenauso vor wie in der vorherigen Lösung.

    Hier können Sie die tatsächlichen Ergebnisse anzeigen.

    2 Spalten Website-Layouts

    Zwei Spaltenlayouts sind ziemlich häufig. Sie sind auch mit Flexbox leicht zu erreichen.

    Betrachten Sie das folgende Markup:

     sidebar main

    Initiieren Sie den Flexbox-Formatierungskontext:

    body { display: flex;}

    Geben Sie asideeine feste Breite an:

    aside { width: 20vw}

    Stellen Sie schließlich sicher, dass mainder verbleibende verfügbare Platz voll ist:

    main { flex: 1}

    Das ist so ziemlich alles.

    Beispiel 5: Medienobjekte mit Flexbox

    Medienobjekte sind überall. Von Tweets bis zu Facebook-Posts scheinen sie für die meisten UI-Designs die erste Wahl zu sein.

    Betrachten Sie das folgende Markup:

    Header

    Wie Sie vermutet haben, .mediawird der Flexbox-Formatierungskontext eingerichtet:

    .media { display: flex}

    Standardmäßig werden die flex-itemsvon a containerentlang der Vertikalen gestreckt, um die verfügbare Höhe innerhalb der zu füllen flex-container.

    Stellen Sie sicher, dass der .media-bodygesamte verfügbare Speicherplatz belegt ist:

    .media-body { flex: 1}

    Lassen Sie uns die gedehnte Box reparieren.

    .media { ... align-items: flex-start}

    Und das ist es.

    Ein gespiegeltes Medienobjekt

    Sie müssen die Quellreihenfolge nicht ändern html, um ein gespiegeltes Medienobjekt zu erstellen.

    Bestellen Sie die flex-items einfach so um:

    .media-object { order: 1}

    Dadurch wird das Bild nach dem .media-bodyund angezeigtmedia-heading

    Ein verschachteltes Medienobjekt

    Sie können sogar das Medienobjekt verschachteln. Ohne einen der von uns geschriebenen CSS-Stile zu ändern.

    Header

    Header

    Es klappt!

    Ein Unicode-Medienobjekt

    Es scheint, dass wir uns nicht nur auf Bilder beschränken.

    Ohne einen der geschriebenen CSS-Stile zu ändern, können Sie das Bild durch einen Unicode darstellen lassen.

     ? 

    Header

    Ich habe mich dort in ein Emoji gekuschelt.

    Wenn Sie den entfernen imgund durch einen ersetzen div, der den gewünschten Unicode enthält, erhalten Sie die obige Ausgabe. Hier können Sie weitere Emoji-Unicodes herunterladen.

    Ein HTML-Entitätsmedienobjekt

    Möglicherweise haben Sie auch HTML-Entitäten verwendet (siehe unten).

    Header

    Die in diesem Beispiel verwendete HTML-Entität ist und Sie können das Ergebnis unten sehen.

    Sie können das Ergebnis dieser Beispiele in diesem CodePen anzeigen.

    Beispiel 6: Erstellen von Formularelementen mit Flexbox

    Es ist heutzutage schwierig, eine Website zu finden, die kein oder zwei Formulare hat.

    Betrachten Sie das folgende Markup:

      … …  …  …

    Dieses Beispiel zeigt die Kombination des Ausrichtens von Eingabefeldern mit Schaltflächen oder Textbereichen. Die Lösung ist mit Flexbox wieder ganz einfach.

    Initiieren Sie den Flexbox-Formatierungskontext:

    .form { display: flex}

    Stellen Sie sicher, dass das Eingabefeld den verfügbaren Platz einnimmt:

    .form__field { flex: 1}

    Schließlich können Sie die angehängten oder vorangestellten Texte und Schaltflächen nach Ihren Wünschen gestalten.

    .form__item { ... }

    Sie können das vollständige Ergebnis dieses Beispiels in diesem CodePen anzeigen.

    Beispiel 7: Erstellen eines Layouts für mobile Apps mit Flexbox

    In diesem Beispiel werde ich Ihnen den Prozess des Layouts der mobilen App unten zeigen:

    Dieses Beispiel ist jedoch anders.

    Ich werde den Prozess des Erstellens des mobilen Layouts in Pseudocode erläutern, und Sie werden fortfahren, es zu erstellen.

    Dies wird eine Form der Übung sein, um Ihre Hände nass zu machen .

    Schritt 1

    Entfernen Sie das Layout vom iPhone, und wir haben Folgendes:

    Schritt 2

    Definieren Sie den enthaltenen Körper als flex-container

    Schritt 3

    Standardmäßig ist das flex-directionvon a auf flex-containereingestellt row. In diesem Fall ändern Sie es in column.

    Schritt 4

    Geben Sie Punkt 1 und 3 feste Höhen wie z height: 50px.

    Schritt 5

    Punkt 2 muss eine Höhe haben, die den verfügbaren Platz ausfüllt. Verwenden Sie flex-growoder die flexKurzschriftflex: 1.

    Schritt 6

    Behandeln Sie schließlich jeden Inhaltsblock als Medienobjekt, wie in einem früheren Beispiel dargestellt.

    Befolgen Sie die obigen sechs Schritte, um das Layout der mobilen App erfolgreich zu erstellen.

    Willst du Pro werden?

    Laden Sie meinen kostenlosen CSS Grid-Spickzettel herunter und erhalten Sie außerdem kostenlos zwei hochwertige interaktive Flexbox-Kurse!

    Hol sie dir jetzt