So erstellen Sie mit Flexbox reine CSS-Smart-Layouts

Veröffentlicht: 2022-03-11

Flexible Box, oder kurz Flexbox, ist eine Reihe von Eigenschaften in CSS, die 2009 eingeführt wurden, um ein neues, außergewöhnliches Layoutsystem bereitzustellen. Das Flexbox-Modul wird als Teil der dritten Version von CSS (CSS3) identifiziert.

Sie verwenden wahrscheinlich bereits viele der neuen Eigenschaften in CSS3, wie beispielsweise box-shadow , border-radius , background gradients und so weiter. Flexbox muss jedoch noch die breite Akzeptanz erfahren, die es verdient. Dies kann an all den bahnbrechenden Änderungen liegen, die es im Laufe der Jahre erlitten hat, oder daran, dass es in Internet Explorer 10 nur teilweise unterstützt wird, oder einfach daran, dass Flexbox ein ganzes Ökosystem ist, während frühere Paradigmen überwiegend auf einzelnen, sofort einsatzbereiten Modellen basierten. Eigenschaften gehen.

Es ist super leistungsfähig und bietet eine breite Palette von Optionen, um Layouts zu erzielen, von denen zuvor nur geträumt werden konnte.

Dieser Artikel führt Sie durch die Grundlagen von Flexbox und wie Sie damit einige wirklich coole Layouts erstellen können, die sonst komplizierte CSS-Hacks oder sogar JavaScript erfordern würden.

Warum Flexbox verwenden?

Standardmäßig werden HTML-Elemente auf Blockebene gestapelt. Wenn Sie sie also in einer Reihe ausrichten möchten, müssen Sie sich auf CSS-Eigenschaften wie float verlassen oder die display mit Tabellen- oder Inline-Block-Einstellungen manipulieren.

Wenn Sie float (links oder rechts) verwenden, müssen Sie den Wrapper irgendwann löschen, um ihn bis zum allerletzten Float-Element zu verschieben, da sie sonst über alles, was danach kommt, überlaufen. Mit Float sind Sie jedoch darauf beschränkt, Elemente horizontal zu organisieren.

Alternativ oder zusätzlich können Sie die display manipulieren, um zu versuchen, das gewünschte Layout zu erreichen! Aber das fühlt sich bestenfalls klobig an, ganz zu schweigen von langweilig, und führt oft zu einem ziemlich fragilen Layout, das nicht unbedingt konsistent über Browser hinweg gerendert wird. Dieser Ansatz ist besonders ineffektiv, wenn Sie auf mehrere Geräte unterschiedlicher Größe abzielen – was heutzutage fast immer der Fall ist.

Geben Sie Flexbox ein!

Mit einer einfachen Regel, die auf ein übergeordnetes Element angewendet wird, können Sie das Layoutverhalten aller seiner untergeordneten Elemente leicht steuern.

Mit Flexbox können Sie:

Kehren Sie die Reihenfolge der Elemente innerhalb eines übergeordneten Flexbox-Elements um.
Untergeordnete Elemente in Spalten einschließen (die Anzahl der Spalten kann je nach Größe des untergeordneten und übergeordneten Elements variieren).
Geben Sie die Rate an, mit der Elemente wachsen oder schrumpfen, während sich die Größe des Ansichtsfensters ändert.
Steuern Sie, ob Elemente schrumpfbar sind oder nicht, unabhängig vom angegebenen Breiteneinheitstyp (relativ oder absolut).
Ändern Sie die Reihenfolge der Elemente mit CSS (kombinieren Sie dies mit Medienabfragen und Sie werden grenzenlose Möglichkeiten in Ihrem Flow finden).
Generieren Sie komplexe Verteilungen der Elemente, die äquidistant mit Abstand um oder nur mit Abstand dazwischen sind.
Generieren Sie „abtrünnige“ Elemente, die unterschiedlich fließen (jeder nach links, aber einer nach rechts, oben/unten … es ist Ihre Entscheidung).
Und, was am wichtigsten ist, vermeiden Sie den Clear-Fix-Hack für immer!

Ich verstehe, dass Flexbox am Anfang schwierig sein kann. Ich denke, es ist einfacher, zehn unabhängige CSS-Eigenschaften zu lernen als fünf mit einer gewissen gegenseitigen Abhängigkeit. Mit Ihren aktuellen CSS-Kenntnissen und vielleicht ein wenig Hilfe aus diesem Artikel werden Sie sich jedoch in ein neues CSS-Universum stürzen.

Die Grundlagen von Flexbox

Der Unterschied zwischen den beiden besteht darin, dass ein display: flex -Wrapper wie ein Blockelement wirkt, während ein display: inline-flex Wrapper wie ein Inline-Block wirkt. Außerdem wachsen inline-flex Elemente mit, wenn der Platz für die Kinder nicht ausreicht. Aber abgesehen von diesen Unterschieden wäre das Verhalten der beiden gleich.

Probieren Sie den Beispielcode unten aus, reduzieren Sie die Breite des Ansichtsfensters, wenn Inline-Flex aktiv ist, und … scrollen Sie.

Siehe die Eigenschaft Pen Flexbox @Toptal - Parent - `display` von DD (@Diegue) auf CodePen.

 .wrapper { display: flex || inline-flex; }

Flex-Richtung

Nachdem Sie nun das erste Beispiel gesehen haben, können Sie daraus schließen, dass das Standardverhalten darin besteht, einfach eine Reihe der Elemente zu erstellen. Aber es gibt noch mehr:

row (Standard): Ordnet die Elemente von links nach rechts an (aber wenn RTL gesetzt ist, wäre es rückwärts).
row-reverse: Kehrt die Reihenfolge der Elemente in einer Zeilendisposition um
Spalte: Ordnet die Elemente von oben nach unten an
column-reverse: Kehrt die Reihenfolge der Elemente in einer Spaltendisposition um

Hinweis: Die column und column-reverse können verwendet werden, um die Achsen zu vertauschen, sodass die Eigenschaften, die sich auf die horizontale Achse auswirken würden, stattdessen die vertikale Achse beeinflussen würden.

Siehe die Pen Flexbox @Toptal - Parent - `flex-direction` Eigenschaft von DD (@Diegue) auf CodePen.

 .wrapper { flex-direction: row || row-reverse || column || column-reverse; }

Flex-Wrap

Wenn Sie sich das erste Codebeispiel ansehen, werden Sie feststellen, dass die untergeordneten Elemente nicht standardmäßig innerhalb eines Flex-Wrappers gestapelt werden. Hier kommt flex-wrap ins Spiel:

nowrap (Standard): Verhindert, dass die Elemente in einem Flex-Container verpackt werden
wrap: Wickelt Elemente nach Bedarf in mehrere Zeilen (oder Spalten, je nach flex-direction )
wrap-reverse: Genau wie wrap , aber die Anzahl der Zeilen (oder Spalten) wächst in die entgegengesetzte Richtung, wenn Elemente umbrochen werden

Siehe die Pen Flexbox @Toptal - Parent - `flex-wrap` Eigenschaft von DD (@Diegue) auf CodePen.

 .wrapper { flex-wrap: nowrap || wrap || wrap-reverse; }

Flexflow

Sie können die Eigenschaften flex-direction und flex-wrap in einer einzigen Eigenschaft kombinieren: flex-flow .

 .wrapper { flex-flow: {flex-direction} {flex-wrap}; }

Inhalt begründen

Diese Eigenschaft wird verwendet, um die horizontale Ausrichtung der untergeordneten Elemente zu steuern:

flex-start (default): Elemente werden linksbündig ausgerichtet (ähnlich wie Inline-Elemente mit text-align: left )
flex-end: Elemente werden rechtsbündig ausgerichtet (ähnlich wie Inline-Elemente mit text-align: right )
center: Elemente werden zentriert (ähnlich wie Inline-Elemente mit text-align: center )
space-around (wo die Magie beginnt): Jedes Element wird mit dem gleichen Abstand um jedes Element gerendert. Beachten Sie, dass der Abstand zwischen zwei aufeinanderfolgenden untergeordneten Elementen doppelt so groß ist wie der Abstand zwischen den äußersten Elementen und den Seiten der Hülle.
space-between: Genau wie space-around , außer dass die Elemente durch den gleichen Abstand getrennt werden und es keinen Abstand in der Nähe einer der Kanten des Wrappers gibt.

Hinweis: Denken Sie daran, dass flex-direction , wenn es auf column oder column-reverse gesetzt ist, die Achse vertauscht. Wenn eines davon gesetzt ist, wirkt sich justify-content auf die vertikale Ausrichtung aus, nicht auf die horizontale.

Siehe die Eigenschaft Pen Flexbox @Toptal - Parent - `justify-content` von DD (@Diegue) auf CodePen.

Elemente ausrichten

Diese Eigenschaft ähnelt justify-content , aber der Kontext ihrer Auswirkungen sind die Zeilen und nicht der Wrapper selbst:

flex-start: Elemente werden vertikal an der Oberseite des Wrappers ausgerichtet.
Flex-Ende: Elemente sind vertikal am unteren Rand der Hülle ausgerichtet.
center: Elemente werden innerhalb des Wrappers vertikal zentriert (endlich eine sichere Vorgehensweise, um dies zu erreichen).
stretch (Standard): Zwingt die Elemente, die volle Höhe (bei Anwendung auf eine Zeile) und die volle Breite (bei Anwendung auf eine Spalte) des Wrappers einzunehmen.
Grundlinie: Richtet die Elemente vertikal an ihren tatsächlichen Grundlinien aus.

Siehe die Eigenschaft Pen Flexbox @Toptal - Parent - `align-items` von DD (@Diegue) auf CodePen.

Inhalt ausrichten

Diese Eigenschaft ähnelt justify-content und align-items , funktioniert jedoch auf der vertikalen Achse, und der Kontext ist der gesamte Wrapper (nicht die Zeile wie im vorherigen Beispiel). Um die Auswirkungen zu sehen, benötigen Sie mehr als eine Zeile:

Flex-Start: Zeilen werden vertikal nach oben ausgerichtet (dh von der Oberseite der Verpackung gestapelt).
Flex-Ende: Reihen sind vertikal nach unten ausgerichtet (dh von der Unterseite der Hülle gestapelt).
center: Zeilen werden im Wrapper vertikal zentriert.
stretch (Standard): Im Allgemeinen dehnt diese Eigenschaft die Elemente, um die gesamte vertikale Höhe des Wrappers zu nutzen. Wenn Sie jedoch eine bestimmte Höhe der Elemente festgelegt haben, wird diese Höhe berücksichtigt und der verbleibende vertikale Raum (in dieser Zeile unter diesem Element) bleibt leer.
space-around: Jede Zeile wird vertikal mit dem gleichen Abstand um sich herum gerendert (dh unter und über sich selbst). Beachten Sie, dass der Abstand zwischen zwei Reihen daher doppelt so groß ist wie der Abstand zwischen der oberen und unteren Reihe und den Rändern der Verpackung.
space-between: Genau wie space-around , außer dass die Elemente durch den gleichen Abstand getrennt werden und es keinen Abstand an der Ober- und Unterkante der Hülle gibt.

Siehe die Eigenschaft Pen Flexbox @Toptal - Parent - `align-content` von DD (@Diegue) auf CodePen.

Flex-Wachstum

Diese Eigenschaft legt den relativen Anteil des verfügbaren Platzes fest, den das Element verwenden soll. Der Wert sollte eine ganze Zahl sein, wobei 0 der Standardwert ist.

Angenommen, Sie haben zwei verschiedene Elemente in derselben flexiblen Hülle. Wenn beide einen flex-grow Wert von 1 haben, werden sie gleichmäßig wachsen, um den verfügbaren Platz zu teilen. Aber wenn einer einen flex-grow Wert von 1 und der andere einen flex-grow Wert von 2 hat, wie im Beispiel unten gezeigt, wird dieser mit einem flex-grow Wert von 2 wachsen und doppelt so viel Platz einnehmen wie der erste.

 .wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; }

Siehe die Eigenschaft Pen Flexbox @Toptal - Children - `flex-grow` von DD (@Diegue) auf CodePen.

Flex-Shrink

Ähnlich wie bei flex-grow legt diese Eigenschaft mit einem ganzzahligen Wert fest, ob das Element „schrumpfbar“ ist oder nicht. Ähnlich wie flex-grow gibt flex-shrink den Schrumpffaktor eines Flex-Elements an.

Siehe die Eigenschaft Pen Flexbox @Toptal - Children - `flex-shrink` von DD (@Diegue) auf CodePen.

 .wrapper .element { flex-shrink: 1; /* Default 0 */ }

Flex-Basis

Diese Eigenschaft wird verwendet, um die Anfangsgröße eines Elements zu definieren, bevor der verfügbare Platz verteilt und die Elemente entsprechend angepasst werden.

Hinweis: flex-basis unterstützt calc() und box-sizing: border-box nicht in jedem Browser, daher empfehle ich die Verwendung von width , wenn Sie eines davon verwenden müssen (beachten Sie, dass Sie auch flex-basis: auto; ).

Siehe die Eigenschaft Pen Flexbox @Toptal - Children - `flex-basis` von DD (@Diegue) auf CodePen.

 .wrapper .element { flex-basis: size || auto; /* Default auto */ }

Biegen

Sie können die Eigenschaften flex-grow , flex-shrink und flex-basis in einer einzigen Eigenschaft kombinieren: flex wie folgt:

 .wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

Hinweis: Wenn Sie flex verwenden möchten, stellen Sie sicher, dass Sie jeden einzelnen Wert definieren (auch wenn Sie Standardwerte verwenden möchten), da einige Browser sie möglicherweise nicht erkennen (ein häufiger Fehler hängt damit zusammen, dass der Wert flex-grow nicht definiert wurde).

Sich selbst ausrichten

Diese Eigenschaft ähnelt align-items , aber der Effekt wird individuell auf jedes Element angewendet. Die möglichen Werte sind:

flex-start: Richtet das Element vertikal am oberen Rand der Hülle aus.
flex-end: Richtet das Element vertikal an der Unterseite der Hülle aus.
center: Zentriert das Element vertikal innerhalb der Hülle (endlich ein einfacher Weg, dies zu erreichen!).
stretch (Standard): Streckt das Element so, dass es die volle Höhe des Wrappers (bei Anwendung auf eine Zeile) oder die volle Breite des Wrappers (bei Anwendung auf eine Spalte) einnimmt.
Grundlinie: Richtet die Elemente an ihren tatsächlichen Grundlinien aus.

Siehe die Eigenschaft Pen Flexbox @Toptal - Children - `align-self` von DD (@Diegue) auf CodePen.

Befehl

Flexbox kann Bilder wie in diesem Beispiel gezeigt neu anordnen

Eines der besten Dinge, die in Flexbox enthalten sind, ist die Möglichkeit, Elemente (mithilfe der order -Eigenschaft) neu anzuordnen, ohne das DOM ändern oder JavaScript verwenden zu müssen. Die Funktionsweise der order -Eigenschaft ist super einfach. Ähnlich wie der z-index die Reihenfolge steuert, in der Elemente gerendert werden, steuert die order die Reihenfolge, in der Elemente innerhalb des Wrappers positioniert werden. Das heißt, Elemente mit einem niedrigeren order (der übrigens auch negativ sein kann) werden vor denen mit einem höheren order positioniert.

Siehe die Pen Flexbox @Toptal - Children - `order` Eigenschaft von DD (@Diegue) auf CodePen.

 .wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

Alles zusammenziehen: Anwendungsbeispiele für Flexbox

Wenn es um die Gestaltung von Layouts geht, eröffnet Flexbox eine Welt voller Möglichkeiten. Nachfolgend finden Sie einige Beispiele für die Verwendung von Flexbox-Eigenschaften.

Vertikale Ausrichtungskomponente

Mit Flexbox können Sie alles vertikal ausrichten, einschließlich mehrerer Elemente gleichzeitig. Ohne Flexbox mussten Sie Positionierungs- oder Tabellentechniken verwenden, bei denen wir ein untergeordnetes Element erstellen mussten, das mehrere Elemente enthält. Aber mit Flexbox können Sie diese langwierigen und zerbrechlichen Techniken hinter sich lassen und einfach ein paar Eigenschaften im Wrapper definieren und das war's, unabhängig davon, wie oft sich der Inhalt im Container ändert oder um welche Art von Änderung es sich handelt!

 .wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ }

Sehen Sie sich die Pen Flexbox @Toptal an - Echte Verwendungsmöglichkeiten, die wir geben können - Vertikale Ausrichtung von DD (@Diegue) auf CodePen.

Halb/Halb-Layout

Ein „Halb/Halb“-Layout ist ein Layout in voller Höhe mit zwei Spalten, deren Inhalt jeweils vertikal zentriert ist. Es wird normalerweise „above the fold“ implementiert (dh bevor Benutzer nach dem Laden der Seite nach unten gescrollt haben).

Mit traditionelleren Techniken könnten Sie dieses Layout mit schwebenden Elementen (jeweils 50 % breit) erstellen, indem Sie die schwebenden Elemente in den Wrapper löschen („clearfix“ :before and :after , overflow: hidden , oder ein verrücktes <div> mit clear: both; am Ende). Es ist jedoch eine Menge Arbeit und das Ergebnis ist nicht so stabil wie das, was Flexbox bietet.

Im folgenden Code-Snippet sehen Sie, wie einfach es ist, das Layout festzulegen und wie die untergeordneten Elemente auch Flexbox-Wrapper werden, da alles auch vertikal ausgerichtet ist.

Äußere Verpackung:

 .wrapper { display: flex; flex-direction: column; /* only for mobile */ }

Innere Hüllen:

 .inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ }

Sehen Sie sich die Pen Flexbox @Toptal - Real uses we can give - Half-Bleed Abschnitt von DD (@Diegue) auf CodePen an.

Navbar-Buttons in voller Breite

Eine Navigationsleiste voller Breite verteilt den Platz gleichmäßig in derselben Reihe von Navigationsleistenelementen, unabhängig von der Anzahl der Elemente.

Im Beispiel unten gibt es auch einige ikonische Schaltflächen ohne dieses Verhalten, was zeigt, dass Sie die beiden beliebig kombinieren können. Ohne Flexbox wäre für diese Art von Layouts JavaScript-Code erforderlich gewesen, um den verfügbaren Platz zu berechnen und ihn dann programmgesteuert zu verteilen, je nachdem, welche Schaltflächen sich überspannen und welche nicht.

Flexbox macht dies viel einfacher.

Wrapper-Eigenschaften:

 .navbar { display: flex; }

Übergreifende untergeordnete Eigenschaften:

 .navbar-item { flex-grow: 1; /* They will grow */ }

Nicht übergreifende untergeordnete Eigenschaften:

 .navbar-other { flex-grow: 0; // They won't grow }

Sehen Sie sich die Pen Flexbox @Toptal an - Echte Verwendungsmöglichkeiten, die wir bieten können - Vollrandige Navigationsleiste mit Schaltflächen von DD (@Diegue) auf CodePen.

Klappentext

Wie oft mussten Sie in verschiedenen Projekten eine Reihe von Informationsboxen mit Symbolen und Text implementieren?

Diese Verteilung von Elementen ist vor allem im digitalen Marketing nützlich, kann aber auch andere Verwendungen in der Softwareentwicklung haben. Mit der Leistungsfähigkeit von Flexbox können Sie eine Art Raster festlegen und auch Elemente ausrichten, unabhängig davon, wie viele es sind.

Wrapper-Eigenschaften:

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

Untergeordnete Eigenschaften:

 .blurb { flex-grow: 0; /* elements don't grow */ flex-shrink: 0; /* elements don't shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

Bei Darstellungsfenstern für Tablets und Mobilgeräte variiert die Breite zwischen 50 % und 100 %.

Sehen Sie sich die Pen Flexbox @Toptal an – Real use we can give – Blurbs by DD (@Diegue) on CodePen.

Verbesserte Cross-Browser-Kompatibilität

Die Syntax für Flexbox hat sich in verschiedenen Browserversionen mehrfach geändert. Dies kann ein Problem sein, wenn Sie ein Layout mit Flexbox implementieren und versuchen, ältere Webbrowser zu unterstützen, insbesondere ältere Versionen von Internet Explorer.

Glücklicherweise sind in Flexbugs, einer großartigen Ressource, viele Techniken und Problemumgehungen aufgeführt, mit denen Sie Ihren Code in den unterschiedlichsten Webbrowsern zum Laufen bringen können. Wenn Sie den Informationen auf dieser Website folgen, erhalten Sie bessere, konsistente Ergebnisse in verschiedenen Webbrowsern.

Präfixaufgaben sind in dieser Hinsicht besonders nützlich. Um das Präfixieren von CSS-Regeln zu automatisieren, können Sie eines der folgenden Tools auswählen:

Rubin:

Autoprefixer-Schienen
Mittelsmann Autoprefixer

Node.js:

PostCSS Autoprefixer
Grunt Autoprefixer
Gulp Autoprefixer

Beginnen Sie mit der Erstellung intelligenter Layouts

Flexbox ist ein großartiges Tool, um unsere Arbeit zu beschleunigen, zu optimieren und zu skalieren. Die Grenze liegt nur in der Vorstellung des Entwicklers.

Wenn Sie eine visuelle Hilfe benötigen, um Ihr nächstes Layout zu planen, können Sie diesen hübschen Spielplatz ausprobieren:

Sehen Sie sich den Pen Flexbox @Toptal – Flexbox Playground von DD (@Diegue) auf CodePen an.

Öffnen Sie es in einem neuen Fenster.

Mit der zunehmenden Akzeptanz moderner Webbrowser durch die Mehrheit der Benutzer können Sie mit Flexbox auf einfache Weise erstaunliche Layouts erstellen, ohne sich in unordentlichen JavaScript-Code vertiefen oder klobiges CSS erstellen zu müssen.