Lass mich das zuerst sagen: Flexbox ist einfach. Ob es um Probleme bei der frühen Adoption geht oder weil wir gelernt haben, in Floats und Blöcken zu denken, ich höre oft von Webdesignern, dass Flexbox ihrer Umsetzung nach komplex ist. Aber ich wiederhole: Flexbox ist einfach.
Es gibt einen Trick, Flexbox zu verstehen, den ich dir beibringen werde, nach dem alles klar wird. Aber zuerst möchte ich darüber sprechen, was Flexbox ist.
Flexbox (oder die Flexibles Box-Layout-Modul um den richtigen Namen zu geben) besteht aus einer Reihe von CSS-Eigenschaften, die den Inhalt in einer ansprechenden Weise darstellen.
Flexbox ist die erste CSS-Layout-Technik, die für das moderne Web funktioniert. Bis Flexbox unterstützt wurde, gab es keine Layout-Technik, die gut mit responsivem Webdesign zusammenhing.
Viele Hacks sind herumgeschleudert worden, wie das Setzen von Elementen, die angezeigt werden sollen: Inline-Block und ermöglichen es ihnen, sich zu wickeln. Dies stellte jedoch eine Reihe von Problemen für flexible Standorte dar, nicht zuletzt die fehlende Kontrolle und die Auswirkung der Größenanpassung von Elementen. Aus diesem Grund verwenden viele responsive Websites immer noch JavaScript, um Inhalte zu positionieren.
Flexbox wird vom W3C so beschrieben, dass es für die Gestaltung von UI-Elementen gedacht ist - Dinge wie Menüeinträge - es ist nicht zum Auslegen ganzer Seiten gedacht.
Der Grund, warum es nicht für das Layout ganzer Seiten gedacht ist, ist, dass flexbox ein begleitendes CSS-Modul hat, das Raster-Layout-Modul welches für das Layout bestimmt ist. Das Rasterlayout wird als die am besten geeignete Technik für vollständige Seitenlayouts angesehen. Leider gibt es zur Zeit nur sehr begrenzte Unterstützung für das Netz, und mit "begrenzt" meine ich "keine". Selbst die neueste Version von Chrome unterstützt es nicht ohne Flags.
Erfreulicherweise ist die Browserunterstützung für flexbox viel umfassender. Und weil es so viele moderne Layoutprobleme löst, ist die flexbox ein ideales Werkzeug, bis das Grid endlich verabschiedet wird.
Flexbox ist ideal zum Gestalten von Komponenten auf einer Seite. Die wirkliche Stärke von flexbox und der Grund, warum es so viel besser funktioniert als andere Layout-Optionen, kommt von der Deklaration von Stilen für Gruppen von Elementen anstelle von einzelnen Elementen.
Wenn es um Layout geht, müssen wir selten einen einzelnen Artikel positionieren. Wenn wir dies planen, ist es viel besser, die Positionierung zu verwenden. Flexbox funktioniert am besten, wenn es steuert, wie Gruppen von Elementen zueinander in Beziehung stehen.
Entwerfe immer ein Ding, indem du es in seinem nächsten größeren Kontext betrachtest - einen Stuhl in einem Raum, einen Raum in einem Haus, ein Haus in einer Umgebung, eine Umgebung in einem Stadtplan. - Eliel Saarinen
Daher ist die flexbox-Spezifikation in zwei Teile unterteilt, eine Gruppe von Eigenschaften, die sich auf das Containerelement beziehen, und eine Gruppe von Eigenschaften, die sich auf die darin enthaltenen Elemente beziehen.
Browser-Unterstützung ist typischerweise eine komplexe Frage. Für flexbox umso komplexer, weil flexbox verschiedene syntaxen hat. Die frühe Unentschlossenheit, die unabhängige Entwicklung durch einige Browser-Anbieter und ein iterativer Prozess haben uns mit verschiedenen Versionen von flexbox beliefert, auf die alle einzugehen haben.
Glücklicherweise können wir uns nun darauf verlassen, dass einige Browser-Präfixe für ältere Browser hinzugefügt werden. Gemäß caniuse.com , von aktuellen Mainstream-Browsern wird nur IE9 ein Problem für uns darstellen.
Glücklicherweise, wie bei allem CSS, schlägt flexbox fehl, wenn es nicht funktioniert. Das heißt, IE9 ignoriert es einfach.
Dank der erschütternden mangelnden Zusammenarbeit zwischen verschiedenen Abteilungen von Ausschüssen und Unternehmen hat die Implementierung von flexbox fast das Chaos der frühen 00er Jahre übertroffen, als jeder einzelne Browser jede einzelne Eigenschaft gleichzeitig und falsch implementiert hat. Die drei Implementierungen von flexbox waren für alle im Zweifelsfall einfach ein iterativer Ansatz, der zu der hilfreichsten Lösung geführt hat.
Es gibt drei Versionen der flexbox-Syntax, auf die Sie achten müssen: alt, dazwischen und neu. Verschiedene Browser unterstützen unterschiedliche Syntaxen, IE10 beispielsweise unterstützt die Intence-Syntax.
Genau wie Browser-Präfixe schreiben wir die Flexbox-Syntax vom ältesten zum neuesten, so dass die neueste unterstützte Syntax die älteren Syntaxen außer Kraft setzt.
Zum Beispiel schreiben wir display: flex wie folgt:
display:-webkit-box; /*old prefixed for webkit*/display:-moz-box; /*old prefixed for mozilla*/display:-ms-flexbox; /*inbetween prefixed for ie*/display:-webkit-flex; /*new prefixed for webkit*/display:flex; /*new*/Im Interesse der Klarheit werde ich nicht auf die älteren Syntaxen eingehen oder die Vorzüge von Vorprozessoren, Postprozessoren und verschiedenen Konvertierungsskripten diskutieren. In allen meinen Beispielen werde ich die korrekte, neue Syntax verwenden.
Wenn es um Produktionscode geht, verwende ich eine Reihe von Sass-Mixins, um die Flexbox-Unterstützung für ältere Browser zu erweitern.
Es gibt ein ausgezeichnetes Sass mixin hier , mit der Sie entweder verhindern können, dass der Code aufgebläht wird, oder die Legacy-Syntax extrahieren.
Das Geheimnis von Flexbox ist, dass es keine Box ist. Bis jetzt verwendete jedes Layout im Web ein kartesisches System von x und y, um Punkte zu zeichnen. Flexbox dagegen ist ein Vektor.
Klingt gut, oder? Flexbox ist ein Vektor, dh wir definieren eine Länge und definieren einen Winkel. Wir können den Winkel ändern, ohne die Länge zu beeinflussen; und wir können die Länge ändern, ohne den Winkel zu beeinflussen.
Dieser neue Ansatz führt dazu, dass die Terminologie von flexbox zunächst komplex ist. Wenn wir beispielsweise Elemente an der Spitze eines Flex-Containers ausrichten, verwenden wir flex-start, nicht top . Wenn wir die Ausrichtung ändern, wird flex-start weiterhin angewendet, aber top nicht.
Sobald Sie diesen Ansatz verstanden haben, wird ein Großteil von flexbox entmystifiziert.
Die Flexbox-Syntax ist in zwei Gruppen unterteilt: die Eigenschaften, die den Container steuern, und die Eigenschaften, die die direkten Nachkommen des Containers steuern. Ersteres ist das nützlichste, also fangen wir an.
Nehmen wir an, wir möchten Objekte innerhalb eines Blocks aussortieren. Wir wollen, dass sie gleichmäßig verteilt sind. Mit flexbox ist das ganz einfach. Das erste, was wir brauchen, ist ein Markup, um dies auszuprobieren:
Flexbox Layout Es ist ein einfache HTML-Seite , mit einem Hausdiv, das fünf Raumdivs enthält , von denen jedes eine Klasse hat, die ihre Funktion, Küche, Waschraum, Aufenthaltsraum und Schlafzimmer identifiziert .
Was wir tun werden, ist, das Haus zu einem Flexbox-Container zu machen. Alle Flexbox-Eigenschaften, die wir im Haus festgelegt haben, werden dann auf die Kinder (die Zimmer ) angewendet.
Um die Räume zu gestalten , müssen wir zunächst Haus als Flexbox-Container deklarieren und dann sagen, wie wir die Kindelemente angeordnet haben wollen.
Um House als Flexbox-Container zu deklarieren , verwenden wir den folgenden Code:
.house {background:#FF5651;display:flex;}Und das ist es. Wir haben eine flexible Box erstellt. Alles, was wir jetzt tun müssen, ist, flexbox mitzuteilen, wie das Zimmer zu gestalten ist . Das können wir mithilfe der Eigenschaft justify-content tun.
justify-content hat fünf mögliche Werte: center, flex-start, flex-end, space-around und space-between. Diese zentrieren die Elemente, richten sie am Anfang aus (oben oder links, wie unten beschrieben), am Ende (das ist entweder unten oder rechts), platziere sie mit gleichem Abstand um jedes Element oder mit der gleiche Abstand zwischen den einzelnen Elementen.
Wir verwenden Leerzeichen:
.house {background:#FF5651;display:flex;justify-content: space-around;}Hier ist eine Demo . Beachten Sie, dass der Abstand zwischen den Elementen doppelt so groß ist wie an den beiden äußeren Kanten. Das liegt daran, dass jedes Element links und rechts denselben Platz hat. Wenn wir stattdessen Leerzeichen verwendet hätten, wäre an den Rändern kein Platz mehr vorhanden.
Ich bin mir nicht sicher über Sie, aber der Waschraum in meinem Haus ist ein wenig kleiner als die Lounge, und obwohl ich eine kleine Küche habe, würde ich einen viel größeren lieben. Lassen Sie uns also etwas zu unserem Code hinzufügen, um das zu verdeutlichen:
.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}Wie Sie in sehen können Dieses Beispiel Unsere Zimmer sind immer noch gleichmäßig verteilt. Obwohl wir die Größe geändert haben. Flexbox ist hervorragend darin, Inhalte zu organisieren.
Wie bereits erwähnt, ist einer der Gründe, warum flexbox für Designer so gut funktioniert, der, dass er als Vektor beschrieben wird. Derzeit unterstützt die flexbox nur vier Winkel: 0, 90, 180 und 270 Grad. Es ist also viel einfacher, sie als Achse zu betrachten.
Um die Achse zu ändern, verwenden wir die flex-direction- Eigenschaft, die vier mögliche Werte hat: row (Standard - wie Sie in den obigen Beispielen sehen können, unsere Räume sind von links nach rechts angeordnet), row-reverse, column und Spaltenumkehrung.
Wenn wir die Flex-Richtung in die Spalte ändern , werden Sie sehen in dieser Demo dass die Räume nun senkrecht von oben nach unten angeordnet sind:
.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}Wie Sie sicher raten können, kehren Sie die Reihenfolge der Elemente in Ihrem Flex-Container um.
Sie werden im letzten Beispiel feststellen, dass, während sich das Haus über den gesamten Darstellungsbereich erstreckt, es sich auf die volle Höhe ausdehnt, auch wenn es in Flex-Richtung: Spalte gesetzt ist.
Um mit dem kartesischen Koordinatensystem von CSS gut zu spielen, wird der Flexbox-Container als Blocklevel-Element behandelt.
So wie display: block hat eine begleitende anzeige: inline-block, also zur anzeige: flex hat display: inline-flex.
Inline-Flex ist derzeit am nützlichsten, wenn Sie Flexbox-Elemente in ein bestehendes Layout einfügen und es mit Floats und positionierten Elementen spielen möchten.
Wie wir gesehen haben, macht es flexbox nichts aus, ob es horizontal oder vertikal angeordnet ist, egal welche Richtung man wählt, es wird als primäre Achse von flexbox betrachtet.
Mit der flexbox können wir aber auch die Position auf der gegenüberliegenden, sekundären Achse steuern.
Die Position auf der sekundären Achse wird durch die Eigenschaft align-items gesteuert. Es hat fünf mögliche Werte: Grundlinie, Mitte, Flex-Ende, Flex-Start und Stretch.
Baseline wird normalerweise die nützlichste Option sein. Es stellt sicher, dass die Grundlinien des Texts ausgerichtet sind. Um dies zu testen, müssen wir einige Änderungen an unserer HTML-Datei vornehmen:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomSie werden sehen, dass ich etwas Text hinzugefügt und importiert habe, und dann eine Google-Schriftart angewendet. Ich habe auch die Schriftgröße in der Küche und im Waschraum geändert, also gibt es eine klare Unterscheidung.
Wenn Sie die Eigenschaft align-items auf die Grundlinie setzen , sehen Sie in dieser Demo dass die Grundlinie des Textes übereinstimmt.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}align-items: zentriert zentriert, entweder vertikal (wenn Flex-Richtung: Reihe oder Flex-Richtung: Reihe-rückwärts ) oder horizontal (wenn Flex-Richtung: Spalte oder Flex-Richtung: Spalte-rückwärts ). Hier ist eine Demo.
align-items: flex-start richtet sich nach oben aus und align-items: flex-end richtet sich nach unten (wenn Flex-Richtung: row oder flex-direction: row-reverse ) oder nach links und rechts (if Flex-Richtung: Spalte oder Flex-Richtung: Spaltenumkehrung ). Hier ist eine Demo.
Stretch, ist eine weitere sehr nützliche Option. stretch ändert die Größe der Elemente, so dass jeder die gleiche Höhe hat (sie werden wachsen, nicht schrumpfen). Hier ist eine Demo.
In unseren anderen Beispielen haben wir explizit die Höhe der Elemente festgelegt, was ausreicht, um flexbox zu überschreiben. Um also align-items zu sehen: stretch-Funktion korrekt, müssen Sie die Höhe aller Klassen außer einer entfernen.
Bisher haben wir flexbox verwendet, um Elemente so zu gestalten, dass sie sich über den gesamten Platz verändern. Was passiert jedoch, wenn der Inhalt der Elemente zu groß ist, um auf eine Zeile zu passen?
Um das zu demonstrieren, werde ich die Größe meiner Räume vergrößern:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomHier ist wie es jetzt aussieht.
Wenn Sie Ihr Browserfenster verkleinern, sehen Sie, dass der Inhalt abgeschnitten wird, da kein Platz dafür ist. Glücklicherweise definiert Flexbox eine Flex-Wrap- Eigenschaft für genau diese Möglichkeit, die drei mögliche Werte hat: No-Wrap (Standard), Wrap und Wrap-Reverse.
Umbruch bewirkt, dass alle Elemente, die über den Container hinausgehen, in eine nachfolgende Zeile eingeschlossen werden, genau so wie eine Textzeile umgebrochen wird.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}Wenn Sie Ihren Browser zerquetschen, werden Sie sehen in dieser Demo Die Elemente werden jetzt auf neue Zeilen umgebrochen. Beachten Sie, wie die Eigenschaft align-items: baseline noch angewendet wird? Die eigentliche Stärke von Flexbox liegt in der Kombination seiner Eigenschaften.
Ein wichtiges Konzept, das ich später behandeln werde, ist, dass flex-wrap: wrap-reverse die Reihenfolge der Elemente nicht umkehrt. Dadurch werden alle Elemente, die über den Container hinausgehen, in eine vorherige Zeile eingeschlossen in dieser Demo .
Wie viele CSS-Eigenschaften verfügen auch einige flexbox-Eigenschaften über Kurzversionen, die von den Browserherstellern konsequenter implementiert werden.
Die Flex-Flow- Eigenschaft ist eine Abkürzung für Flex-Direction- und Flex-Wrap- Eigenschaften. Also anstatt zu schreiben:
flex-direction:row-reverse;flex-wrap:wrap;Wir können die Kurzschrift verwenden:
flex-flow:row-reverse wrap;Oben haben wir die Eigenschaft align-items verwendet , um Elemente mit den Elementen baseline, position und stretch auszurichten. Wie Sie im letzten Beispiel sehen können, tritt dies immer noch auf, aber es tritt Zeile für Zeile auf.
Wenn unsere Artikel verpackt sind, haben wir die Möglichkeit festzulegen, wie sie auf der sekundären Achse ausgelegt werden, wenn der Container größer als erforderlich ist.
Wenn wir die Mindesthöhe unseres Hauses auf 1200px einstellen, unser Layout sieht aus wie das .
.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}Wir können jetzt die Eigenschaft align-content verwenden , um die Elemente über die gesamte sekundäre Achse hinweg anzuordnen.
Die Eigenschaft " align-content" hat sechs Einstellungen: " center", "flex-end", "flex-start", "space-around", "space-between" und " stretch". Diese Werte liefern die gleichen Ergebnisse wie an anderen Stellen: Zentrierung, Ausrichtung an einem Ende, gleichmäßige Beabstandung oder Dehnung.
Hier ist eine Demo mit der Eigenschaft auf Space-around gesetzt.
Bis jetzt wurden alle Eigenschaften, die wir untersucht haben, auf dem Containerelement festgelegt. Zur Feinabstimmung von Objekten bietet uns flexbox auch eine Reihe von Eigenschaften, die auf einzelne Artikel eingestellt werden können.
Um dies zu verdeutlichen, entfernen wir etwas von unserem Code:
Flexbox Layout KitchenWashroomLoungeMaster BedroomBedroomHier ist wie es aussieht.
Die erste Flexbox-Elementeigenschaft ist die verwirrend benannte flex- Eigenschaft. flex ist ein Wert der Anzeigeeigenschaft für den Container, aber es ist auch eine eigene Eigenschaft.
Die Flex- Eigenschaft ist eine Abkürzung für die Flex-Grow-, Flex-Shrink- und Flex-Basis- Eigenschaften. Die Rolle dieser Eigenschaften besteht darin, die Größe des Inhalts so zu vergrößern oder zu reduzieren, dass der gesamte Inhalt ausgefüllt wird.
Die Eigenschaft flex-grow teilt den Elementen mit, dass sie bei Bedarf vergrößert werden können, damit die Elemente die Breite (für Flex-Richtung: Zeile ) und die Höhe (für Flex-Richtung: Spalte ) vollständig ausfüllen.
Die flex-grow- Eigenschaft nimmt ein Verhältnis ein. Wenn wir also die Eigenschaft flex-grow auf 1 setzen, haben alle unsere Elemente die gleiche Größe wie Sie können hier sehen .
.room {background:#00AAF2;height:90px;flex-grow:1;}Neben einer gleich großen Größe können wir auch verschiedene Quoten festlegen. Ich möchte immer noch, dass meine Küche größer ist als mein Waschraum, also lasst uns das reparieren in dieser Demo .
.kitchen {height:300px;flex-grow:2;}flex-shrink funktioniert genau wie flex-grow, außer dass das Element bei Bedarf verkleinert wird , anstatt es zu erweitern.
Wenn Sie die Größe des Browsers ändern, sehen Sie, dass die Küche in verschiedenen Größen nicht doppelt so breit ist wie die anderen Zimmer . Das liegt an der Flex-Basis- Eigenschaft.
flex-basis legt fest, wie die flex-grow- und flex-shrink- Eigenschaften berechnet werden. Es hat 2 Werte: auto (Standard) und 0.
Wenn der Wert 0 ist, wird der gesamte Artikel berücksichtigt. Wenn diese Option auf auto gesetzt ist, wird die Größe des Inhalts um den Inhalt des Elements angepasst. Mit anderen Worten, 0 ignoriert die Größe des Inhalts des Elements bei der Berechnung und berücksichtigt dies automatisch . Da ist ein handliches Diagramm zur Verfügung gestellt vom W3C, das dies erklärt.
Hier ist eine Demo was passiert, wenn ich flex-basis setze : 0 im obigen Beispiel.
flex-basis: 0 ist besonders nützlich, wenn Sie Objekte unabhängig vom Inhalt gleichmäßig verteilen möchten.
Wie oben erwähnt, ist die flex- Eigenschaft eine Abkürzung für diese Eigenschaften und Sie werden feststellen, dass dies die zuverlässigste Methode zum Festlegen dieser Werte ist.
Die Reihenfolge der Werte ist flex-grow, flex-shrink, flex-basis. Um also einen Grow-Wert von 2, einen Shrink-Wert von 1 und eine Basis von 0 zu setzen, würden Sie Folgendes verwenden:
.room {background:#00AAF2;height:90px;flex: 2 1 0;}Eines der besten Features von flexbox ist die Möglichkeit, die Reihenfolge der Elemente zu ändern, ohne das Markup zu beeinträchtigen. Dies ist besonders nützlich für die Barrierefreiheit, da es uns ermöglicht, Markup entsprechend zu codieren und dann optimal anzuzeigen.
Dazu verwenden wir die Bestelleigenschaft des Artikels.
In unserem Beispiel befindet sich der Waschraum direkt neben der Küche. Ich hätte es lieber neben den Schlafzimmern, also kann ich direkt in die Dusche eines Morgens springen, also lass es uns bewegen. Es ist momentan der 2. Punkt, wir wollen, dass es der dritte ist. Also legen wir seine Bestelleigenschaft entsprechend fest in dieser Demo .
.washroom {height:60px;order:2;}Siehst du, wie es bis zum Ende der Reihe hüpfte? Es ist neben den Schlafzimmern, aber nicht wie wir es wollten. Das ist ein großes Problem in Flexbox, da viele Entwickler (ich selbst eingeschlossen) zunächst erwarten , dass die Reihenfolge wie ein Array funktioniert.
Die Reihenfolge funktioniert wie der CSS- Z-Index, dh wenn Sie eine Bestellung nicht explizit für einen Artikel festlegen, wird angenommen, dass sie in der Reihenfolge niedriger ist als ein Artikel, für den ein Wert explizit festgelegt wurde.
Wir wollen den Waschraum mit der Lounge tauschen, also in dieser Demo Die einzigen anderen Gegenstände, die eine Bestellung benötigen , sind die Schlafzimmer .
.washroom {height:60px;order:2;}.bedroom {order:3;}Beachten Sie, dass beide Schlafzimmer die gleiche Bestellnummer haben? In solchen Fällen greift der Browser auf die DOM-Bestellung zurück.
Die letzte Elementeigenschaft ist align-self. Es wird verwendet, um die Ausrichtung des Objekts auf der sekundären Achse zu ändern. align-items wird verwendet, um alle Elemente auszurichten, und diese Eigenschaft gibt Ihnen die Möglichkeit, diese allgemeine Einstellung zu deaktivieren.
Es verwendet die gleichen fünf Werte wie die entsprechende Eigenschaft des Containers: Grundlinie, Mitte, Flex-Ende, Flex-Start und Dehnung.
Hier ist eine Demo der Waschraum neu ausgerichtet.
.washroom {height:60px;order:2;align-self:flex-end;}Flexbox ist eine leistungsstarke Option zum Auslegen von Inhalten. Obwohl es nicht für das Layout ganzer Seiten gedacht ist, ist es aufgrund seiner überlegenen Unterstützung für das Grid-Layout eine großartige Option, insbesondere für die ersten mobilen Websites.
Um dies zu demonstrieren, werden wir eine einfache Seite zusammenstellen, die einige der oben beschriebenen Techniken verwendet.
Als Erstes finden Sie unser Markup und einige grundlegende Stile für die Seite.
Flexbox Demo - A
- B
- C
- D
- E
- F
- G
Wie du kannst sehen Ich habe ein Div mit der ID- Seite. Innerhalb der Seite habe ich eine ungeordnete Liste von Nachrichten. Im Anschluss an die Nachrichten habe ich den Header, der unter dem Nachrichteninhalt liegt, zugunsten der Zugänglichkeit. Endlich habe ich eine Fußzeile.
Das erste, was ich tun möchte, ist, den Header an den Anfang der Seite zu bewegen. Um dies zu erreichen, legen wir die Seite als Flexbox-Container fest. Dann werden wir die Richtung auf Spalte festlegen . Weisen Sie dann den untergeordneten Elementen der Seite eine Reihenfolge zu.
#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}Der nächste Schritt ist das Layout des Headers. Untergeordnete Elemente in Flexbox-Containern können eigenständige Flexbox-Container sein, sodass wir flexbox verwenden können, um die Header- Elemente gleichmäßig zu platzieren.
Lassen Sie uns den Header als Flexbox-Container definieren. Lassen Sie uns dann den Inhalt gleichmäßig verteilen, ohne zusätzliche Seitenauffüllungen. Stellen Sie schließlich sicher, dass sich die Menüelemente auf derselben Basislinie wie das Logo befinden.
#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}Unsere Nachrichten werden Platzhalter für ausgewählte Storys sein, daher müssen sie eine beträchtliche Größe haben, um Platz für Text und ein Bild oder Video zu schaffen. Also müssen wir sie wickeln.
Lassen Sie uns das News- Div als Flexbox-Container festlegen. Als nächstes geben wir den newsItem s einige Mindestmaße und etwas Farbe, damit wir sie klar sehen können.
#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}Jetzt müssen wir den Nachrichtencontainer für den Zeilenumbruch und das NewsItem für den verfügbaren Platz erweitern.
#news {order:2;display:flex;flex-flow:row wrap;}Die Herausforderung, die wir jetzt haben, besteht darin, dass, wenn die newsItems nicht gleichmäßig verteilt sind, der größte Gegenstand (G) ganz unten ist. Auf den meisten Websites möchten wir dem obersten Inhalt den größtmöglichen Platz einräumen. Wir können dies beheben, indem wir den Umbruch auf Umbruch setzen.
#news {order:2;display:flex;flex-flow:row wrap-reverse;}Das sortiert die Objekte neu, aber von oben links gelesen, sind sie jetzt außer Betrieb. Also müssen wir die Reihenfolge umkehren, indem wir die Richtung auf Zeilenumkehr einstellen .
#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}Dadurch werden die Elemente nacheinander angeordnet und von links nach rechts und von oben nach unten gelesen. mit den größeren Gegenständen immer an der Spitze. Aber ich möchte die Reihenfolge der Geschichten in meinem Markup nicht ändern müssen, um zu zwingen, dass Element A vor Element B kommt. Also muss ich als letztes die Reihenfolge der Elemente ändern.
.newsItem:nth-of-type(7) {order:1;}.newsItem:nth-of-type(6) {order:2;}.newsItem:nth-of-type(5) {order:3;}.newsItem:nth-of-type(4) {order:4;}.newsItem:nth-of-type(3) {order:5;}.newsItem:nth-of-type(2) {order:6;}.newsItem:nth-of-type(1) {order:7;}Das letzte zu gestaltende Element ist die Fußzeile. Wir wollen es wie den Header darstellen, aber da die Fußzeile nur drei untergeordnete Elemente hat (im Vergleich zu den vier Kopfzeilen ), werden wir den Absatz so einstellen, dass er doppelt so breit wie das Logo und die Liste ist .
#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}Das funktioniert gut bei Desktop-Größen, aber verkleinern Sie Ihren Browser und Sie werden sehen, dass es auf kleinen Geräten zu eng ist. Lassen Sie uns den Code so ändern, dass er als Spalten unterhalb von 600px angelegt wird und zu einer Zeile oberhalb von 600px zurückkehrt.
#footer {order:3;display:flex;align-items:baseline;flex-direction:column;padding:2em 0;}#footer > * {flex:1;}#footer > p {flex:2;}@media only screen and (min-width:600px) {#footer {flex-direction:row;padding:0;}#footer > p {margin-right:2em;}}Und da hast du es. Ein moderner Ansatz zum Auslegen von Inhalten auf einer Webseite, der weitgehend unterstützt und einfach zu implementieren ist.
Die Stärke von flexbox besteht darin, dass seine Eigenschaften so kombiniert werden können, dass wir unsere Layouts mit einer möglichst einfachen Syntax präzise steuern können.