Modernes Weblayout mit Flexbox

Lassen Sie mich zunächst Folgendes sagen: Flexbox ist einfach. Ob es nun an Problemen bei der frühen Einführung liegt oder weil wir gelernt haben, in Floats und Blöcken zu denken, ich höre oft von Webdesignern, dass sie denken, dass die Implementierung von Flexbox komplex sei. Aber ich wiederhole: Flexbox ist einfach.

Es gibt einen Trick zum Verständnis von Flexbox, den ich Ihnen beibringen werde, nach dem alles klar sein wird. Aber zuerst möchte ich darüber sprechen, was Flexbox ist.

Was ist Flexbox?

Flexbox (oder die Flexibles Box-Layout-Modul (um den korrekten Namen zu geben) ist eine Reihe von CSS-Eigenschaften, die zusammen eine reaktionsfähige Gestaltung von Inhalten ermöglichen.

Flexbox ist die erste CSS-Layouttechnik, die für das moderne Web funktioniert. Man kann mit Recht sagen, dass es bis zur Unterstützung von Flexbox keine Layouttechnik gab, die gut mit responsivem Webdesign funktionierte.

Es sind viele Hacks im Umlauf, etwa das Setzen von Elementen display:inline-block und sie einwickeln lassen. Dies stellte jedoch eine Reihe von Problemen für flexible Websites dar, nicht zuletzt die mangelnde Kontrolle und die Folgewirkung der Größenänderung von Elementen. Aus diesem Grund verwenden viele responsive Websites immer noch JavaScript, um Inhalte zu positionieren.

Wozu dient Flexbox?

Flexbox wird vom W3C als für die Gestaltung von UI-Elementen – Dingen wie Menüelementen – gedacht, es ist jedoch nicht für die Gestaltung ganzer Seiten gedacht.

Der Grund, warum es nicht für das Layout ganzer Seiten gedacht ist, liegt darin, dass Flexbox über ein begleitendes CSS-Modul verfügt, das Rasterlayoutmodul welches für das Layout gedacht ist. Gitterstruktur gilt als die am besten geeignete Technik für ganzseitige Layouts. Leider gibt es derzeit nur sehr begrenzte Unterstützung für Grid, und mit „begrenzt“ meine ich „keine“. Selbst die neueste Version von Chrome unterstützt es nicht ohne Flags.

Glücklicherweise ist die Browserunterstützung für Flexbox viel umfassender. Und weil es so viele moderne Layoutprobleme löst, ist Flexbox ein ideales Werkzeug, bis Grid endgültig eingeführt wird.

Styling-Komponenten

Flexbox eignet sich ideal zum Stylen von Komponenten auf einer Seite. Die wahre Stärke von Flexbox und der Grund dafür, dass es so viel besser funktioniert als andere Layoutoptionen, liegt in der Deklaration von Stilen für Gruppen von Elementen statt für einzelne Elemente.

Wenn es um das Layout geht, müssen wir selten ein einzelnes Element 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.

Daher ist die Flexbox-Spezifikation in zwei Teile unterteilt: einen Satz von Eigenschaften, die sich auf das Containerelement beziehen, und einen Satz von Eigenschaften, die sich auf die darin enthaltenen Elemente beziehen.

Browserunterstützung

Die Browserunterstützung ist normalerweise eine komplexe Frage. Für Flexbox umso komplexer, da Flexbox über mehrere unterschiedliche Syntaxen verfügt. Frühe Unentschlossenheit, unabhängige Entwicklung durch einige Browser-Anbieter und ein iterativer Prozess haben dazu geführt, dass wir mehrere verschiedene Versionen von Flexbox haben, die alle berücksichtigt werden müssen.

Dank der Hinzufügung einiger Browser-Präfixe für ältere Browser können wir uns nun glücklicherweise darauf verlassen. Entsprechend caniuse.comvon den aktuellen Mainstream-Browsern wird für uns nur IE9 ein Problem darstellen.

Glücklicherweise scheitert Flexbox, wie jedes CSS, stillschweigend, wenn es fehlschlägt. Das bedeutet, dass IE9 es einfach ignoriert.

Flexbox-Versionen

Aufgrund des erschreckenden Mangels an Zusammenarbeit zwischen verschiedenen Zweigen von Gremien und Unternehmen hat die Implementierung von Flexbox fast mit dem Chaos der frühen 2000er-Jahre mithalten können, als jeder einzelne Browser jede einzelne Eigenschaft einzigartig und gleichzeitig falsch implementierte. Um allen im Zweifelsfall zu vertrauen: Die drei Implementierungen von Flexbox waren lediglich ein iterativer Ansatz, der zur hilfreichsten gemeinsamen Lösung geführt hat.

Es gibt drei Versionen der Flexbox-Syntax, die Sie kennen müssen: alt, dazwischen und neu. Verschiedene Browser unterstützen unterschiedliche Syntaxen, IE10 unterstützt beispielsweise die Zwischensyntax.

Genau wie Browser-Präfixe schreiben wir die Flexbox-Syntax von der ältesten zur neuesten, sodass die neueste unterstützte Syntax die älteren Syntaxen überschreibt.

Wir schreiben zum Beispiel Anzeige:flex etwa so:

display:-webkit-box; /*altes Präfix für Webkit*/ display:-moz-box; /*altes Präfix für Mozilla*/ display:-ms-flexbox; /*inbetween mit Präfix für ie*/ display:-webkit-flex; /*neues Präfix für Webkit*/ display:flex; /*neu*/

Der Klarheit halber werde ich nicht auf die älteren Syntaxen eingehen oder die Vorzüge von Präprozessoren, 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 auf ältere Browser zu erweitern.

Es gibt ein ausgezeichnetes Frecher Mix hiermit dem Sie entweder ein Aufblähen Ihres Codes verhindern oder die alte Syntax extrahieren können.

Das Geheimnis zum Verständnis von Flexbox

Das Geheimnis von Flexbox besteht darin, dass es sich überhaupt nicht um eine Box handelt. Bisher verwendeten alle Layouts im Web ein kartesisches System aus x und y, um Punkte darzustellen. Im Gegensatz dazu ist Flexbox ein Vektor.

Klingt großartig, oder? Flexbox ist ein Vektor, das heißt, wir definieren eine Länge und 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 einige der Flexbox-Terminologien zunächst komplex sind. Wenn wir beispielsweise Gegenstände an der Oberseite eines Flex-Containers ausrichten, verwenden wir Flexstart, nicht Spitze– denn wenn wir die Ausrichtung ändern, Flex-Start wird weiterhin gelten, aber Spitze wird nicht.

Lesen:  Das DreamHost+Visual Composer-Gewinnspiel ist mehr als ... wert

Sobald Sie diesen Ansatz verstanden haben, ist ein Großteil der Flexbox entmystifiziert.

So verwenden Sie Flexbox-Container

Die Syntax von Flexbox ist in zwei Gruppen unterteilt: die Eigenschaften, die den Container steuern, und die Eigenschaften, die die direkten Nachkommen des Containers steuern. Ersteres ist am nützlichsten, also fangen wir dort an.

Erste Schritte

Nehmen wir an, wir möchten Elemente innerhalb eines Blocks räumlich anordnen. Wir wollen, dass sie gleichmäßig verteilt sind. Mit Flexbox ist das wirklich einfach. Das erste, was wir brauchen, ist ein Markup, um dies auszuprobieren:

Flexbox-Layout

Es ist eine einfache HTML-Seite mit einem Haus div, das fünf enthält Zimmer Divs, von denen jedes eine Klasse hat, die ihre Funktion identifiziert, Küche, Waschraum, Wohnzimmer, Und Schlafzimmer.

Was wir tun werden, ist das festzulegen Haus ein Flexbox-Container sein. Alle von uns festgelegten Flexbox-Eigenschaften Haus wird dann auf seine Kinder angewendet (die ZimmerS).

Erstellen einer flexiblen Box

Um das Layout zu gestalten Zimmers müssen wir zuerst deklarieren Haus als Flexbox-Container und teilen Sie ihm dann mit, wie die untergeordneten Elemente angeordnet werden sollen.

Verkünden Haus Als Flexbox-Container verwenden wir folgenden Code:

.house { Hintergrund:#FF5651; Anzeige:flex; }

Und das ist es. Wir haben eine flexible Box erstellt. Jetzt müssen wir Flexbox nur noch mitteilen, wie das Layout erfolgen soll ZimmerS. Wir können das mit dem machen Rechtfertigungsinhalt Eigentum.

Rechtfertigungsinhalt hat fünf mögliche Werte: Mitte, Flex-Start, Flex-Ende, Raum-um, Und Raum dazwischen. Diese zentrieren die Elemente, richten sie am Anfang (entweder oben oder links, wie wir weiter unten besprechen werden) und am Ende (entweder unten oder rechts) aus und platzieren sie mit gleichem Abstand um jedes Element herum oder mit Gleicher Abstand zwischen den einzelnen Elementen.

Wir verwenden space-around:

.house { Hintergrund:#FF5651; Anzeige:flex; justify-content: space-around; }

Ist Ihnen aufgefallen, dass zwischen den Gegenständen doppelt so viel Platz ist wie an den beiden Außenkanten? Das liegt daran, dass jedes Element links und rechts den gleichen Platz hat. Hätten wir genutzt Raum dazwischen Stattdessen gäbe es an den Rändern keinen Platz.

Ich bin mir bei Ihnen nicht sicher, aber der Waschraum in meinem Haus ist etwas kleiner als das Wohnzimmer, und obwohl ich eine kleine Küche habe, hätte ich gerne eine viel größere. Nehmen wir also einige Ergänzungen zu unserem Code vor, um dies widerzuspiegeln:

.kitchen { width:300px; Höhe: 300 Pixel; } .washroom { width:45px; Höhe:60px; }

Unsere Zimmer sind immer noch gleichmäßig verteilt. Auch wenn wir die Größe geändert haben. Flexbox ist hervorragend darin, Inhalte zu organisieren.

Winkel ändern

Wie wir oben besprochen haben, ist einer der Gründe dafür, dass Flexbox für Designer so gut funktioniert, dass es als Vektor beschrieben wird. Derzeit unterstützt Flexbox nur vier Winkel: 0, 90, 180 und 270 Grad. Daher ist es viel einfacher, sie sich als eine Achse vorzustellen.

Um die Achse zu ändern, verwenden wir die Flex-Richtung Eigenschaft, die vier mögliche Werte hat: Reihe (Standardeinstellung – wie Sie in den Beispielen oben sehen können, sind unsere Räume von links nach rechts angeordnet), Zeilenumkehr, Spalte, Und spaltenumgekehrt.

Wenn wir das ändern Flex-Richtung Zu Spalte, Sie werden sehen, dass die Räume jetzt vertikal von oben nach unten angeordnet sind:

.house { Hintergrund:#FF5651; Anzeige:flex; justify-content: space-around; Flex-Richtung:Spalte; }

Wie Sie sicher erraten können, Reihenrückwärts Und spaltenumgekehrt Kehren Sie die Reihenfolge der Elemente in Ihrem Flex-Container um.

Flex vs. Flex-inline

Sie werden im letzten Beispiel bemerken, dass while Haus sich über das gesamte Ansichtsfenster erstreckt, erstreckt es sich auch dann auf die volle Höhe, wenn es auf eingestellt ist Flex-Richtung:Spalte.

Um gut mit dem kartesischen Koordinatensystem von CSS zu spielen, wird der Flexbox-Container als Element auf Blockebene behandelt.

Genauso wie Bildschirmsperre hat einen Begleiter display:inline-block, so zu Anzeige:flex hat Anzeige:inline-flex.

Inline-Flex ist derzeit am nützlichsten, wenn Sie Flexbox-Elemente in ein vorhandenes Layout einfügen und es gut mit Floats und positionierten Elementen funktionieren soll.

Ausrichtung quer zur Achse

Wie wir gesehen haben, spielt es für Flexbox keine Rolle, ob es horizontal oder vertikal angeordnet ist. Die von Ihnen gewählte Richtung wird als Hauptachse von Flexbox betrachtet.

Mit Flexbox können wir aber auch die Position entlang der gegenüberliegenden Sekundärachse steuern.

Die Position auf der Sekundärachse wird durch gesteuert align-items Eigentum; es hat fünf mögliche Werte: Grundlinie, Mitte, Flex-Ende, Flex-Start, Und strecken.

Grundlinie ist normalerweise die nützlichste Option. Dadurch wird sichergestellt, dass die Grundlinien des Textes ausgerichtet sind. Um dies zu testen, müssen wir einige Änderungen an unserer HTML-Datei vornehmen:

Flexbox-Layout

GoogleFonts

400: Missing font family

The requested font families are not available.

Requested:Open Sans (style:normal,weight:400)

For reference,see the Google Fonts API documentation.

Küche
Waschraum
Wohnzimmer
Schlafzimmer
Schlafzimmer

Sie werden sehen, dass ich etwas Text hinzugefügt und importiert und dann eine Google-Schriftart angewendet habe. Ich habe auch das geändert Schriftgröße im Küche Und Waschraum Es gibt also eine klare Unterscheidung.

Wenn wir das einstellen align-items Eigentum zu Grundlinie Sie werden sehen, dass die Grundlinie des Textes übereinstimmt.

.house { Hintergrund:#FF5651; Anzeige:flex; justify-content:space-around; align-items:baseline; }

align-items:center Die Mitte wird entweder vertikal ausgerichtet (falls Flex-Richtung:Reihe, oder Flex-Richtung: Zeilenumkehr) oder horizontal (falls Flex-Richtung:Spalte, oder Flexrichtung:Spaltenumkehr).

align-items:flex-start richtet sich nach oben aus und align-items:flex-end richtet sich nach unten aus (falls Flex-Richtung:Reihe, oder Flex-Richtung: Zeilenumkehr), oder nach links und rechts (falls Flex-Richtung:Spalte, oder Flexrichtung:Spaltenumkehr).

strecken, ist eine weitere äußerst nützliche Option. strecken ändert die Größe der Elemente, sodass jedes Element die gleiche Höhe hat (sie werden größer, nicht kleiner).

In unseren anderen Beispielen haben wir die Höhe der Elemente explizit festgelegt, was ausreicht, um Flexbox zu überschreiben align-items:stretch ordnungsgemäß funktionieren, müssen Sie das entfernen Höhe aus allen Klassen bis auf eine.

Lesen:  Oktober CMS mit DreamHost Alles, was Sie wissen müssen

Auf mehrere Zeilen umbrechen

Bisher haben wir Flexbox verwendet, um Elemente so anzuordnen, dass sich ihre Größe im gesamten Raum ändert. Was passiert jedoch, wenn der Inhalt der Elemente zu groß ist, um in eine Zeile zu passen?

Um dies zu demonstrieren, werde ich meine Räume vergrößern:

Flexbox-Layout

GoogleFonts

400: Missing font family

The requested font families are not available.

Requested:Open Sans (style:normal,weight:400)

For reference,see the Google Fonts API documentation.

Küche
Waschraum
Wohnzimmer
Schlafzimmer
Schlafzimmer

Wenn Sie Ihr Browserfenster verkleinern, werden Sie feststellen, dass der Inhalt abgeschnitten wird, da kein Platz dafür vorhanden ist. Glücklicherweise definiert Flexbox a Flexfolie Eigenschaft für genau diesen Fall, die drei mögliche Werte hat: kein Wrap (der Standard), wickeln, Und Wrap-Reverse.

wickeln bewirkt, dass alle Elemente, die über den Container hinausragen, in eine nachfolgende Zeile umgebrochen werden, genau wie eine Textzeile umgebrochen wird.

.house { Hintergrund:#FF5651; Anzeige:flex; justify-content:space-around; align-items:baseline; flex-wrap:wrap; }

Wenn Sie Ihren Browser herunterfahren, sehen Sie, dass die Elemente jetzt in neue Zeilen umgebrochen werden. Beachten Sie, wie die align-items:baseline Eigentum wird noch angewendet? Die wahre Stärke von Flexbox liegt in der Kombination seiner Eigenschaften.

Ein wichtiges Konzept, auf das ich später eingehen werde, ist Folgendes Flex-Wrap:Wrap-Reverse kehrt die Reihenfolge der Elemente nicht um, sondern bewirkt, dass alle Elemente, die über den Container hinausragen würden, in eine vorherige Zeile umgebrochen werden.

Verwendung der Kurzeigenschaften von Flexbox

Wie viele CSS-Eigenschaften gibt es auch für einige Flexbox-Eigenschaften Kurzversionen, die von Browserherstellern konsistenter implementiert werden.

Der Flex-Flow Eigenschaft ist die Abkürzung für die Flex-Richtung Und Flexfolie Eigenschaften. Anstatt also zu schreiben:

Flex-Richtung: Zeilenumkehr; flex-wrap:wrap;

Wir können die Abkürzung verwenden:

flex-flow:row-reverse Wrap;

Querachsenausrichtung (Teil 2)

Oben haben wir das verwendet align-items Eigenschaft, um Elemente an der Grundlinie auszurichten, zu positionieren und zu strecken. Wie Sie im letzten Beispiel sehen können, geschieht dies immer noch, aber es geschieht Zeile für Zeile.

Wenn unsere Artikel verpackt sind, haben wir die Möglichkeit festzulegen, wie sie auf der Sekundärachse angeordnet werden, wenn der Behälter größer als erforderlich ist.

.house { Hintergrund:#FF5651; Mindesthöhe: 1200 Pixel; Anzeige:flex; justify-content:space-around; flex-wrap:wrap; }

Wir können jetzt das verwenden Inhalt ausrichten -Eigenschaft, um die Elemente über die gesamte Sekundärachse anzuordnen.

Der Inhalt ausrichten Die Eigenschaft verfügt über sechs Einstellungen: Mitte, Flex-Ende, Flex-Start, Raum-um, Raum-zwischen, Und strecken. Diese Werte liefern die gleichen Ergebnisse wie anderswo: Zentrierung, Ausrichtung an einem Ende, gleichmäßiger Abstand oder Dehnung.

So verwenden Sie Flexbox-Elemente

Bisher wurden alle von uns betrachteten Eigenschaften auf das Containerelement festgelegt. Zur Feinabstimmung von Artikeln stellt uns Flexbox außerdem eine Reihe von Eigenschaften zur Verfügung, die für einzelne Artikel festgelegt werden können.

Um dies zu verdeutlichen, entfernen wir einen Teil unseres Codes:

Flexbox-Layout

GoogleFonts

400: Missing font family

The requested font families are not available.

Requested:Open Sans (style:normal,weight:400)

For reference,see the Google Fonts API documentation.

Küche
Waschraum
Wohnzimmer
Hauptschlafzimmer
Schlafzimmer

< /html>

Steuerung einzelner Artikel

Die erste Eigenschaft des Flexbox-Elements hat einen verwirrenden Namen biegen Eigentum. biegen ist ein Wert der Anzeige Eigentum am Container, es handelt sich aber auch um ein eigenständiges Eigentum.

Der biegen Eigenschaft ist die Abkürzung für die Flex-Wachstum, Flex-Schrumpf, Und Flex-Basis Eigenschaften. Die Aufgabe dieser Eigenschaften besteht darin, die Größe des Inhalts zu strecken oder zu stauchen, sodass er den gesamten Raum ausfüllt.

Der Flex-Grow Die Eigenschaft teilt den Elementen mit, dass sie bei Bedarf vergrößert werden können, sodass die Elemente die Breite ausfüllen (z Flexrichtung:Reihe) und die Höhe (z Flex-Richtung:Spalte) völlig.

Der Flex-Grow Eigenschaft braucht ein Verhältnis. Wenn wir also das festlegen Flex-Grow Eigenschaft auf 1, alle unsere Artikel haben die gleiche Größe.

.room { Hintergrund:#00AAF2; Höhe:90px; Flex-Grow:1; }

Wir können nicht nur eine gleiche Größe annehmen, sondern auch unterschiedliche Verhältnisse festlegen. Ich möchte immer noch, dass meine Küche größer ist als mein Waschraum, also lasst uns das in Ordnung bringen.

.kitchen { height:300px; Flex-Grow:2; }

Flex-Schrumpf funktioniert genauso wie Flex-Grow außer dass es das Element bei Bedarf verkleinert, anstatt es zu erweitern.

Wenn Sie die Größe des Browsers ändern, werden Sie das in verschiedenen Größen sehen, mein Gott Küche ist nicht genau doppelt so breit wie das andere ZimmerS. Das liegt daran Flex-Basis Eigentum.

Flex-Basis bestimmt, wie die Flex-Grow Und Flex-Schrumpf Eigenschaften werden berechnet. Es hat 2 Werte: Auto (die Standardeinstellung) und 0.

Wenn eingestellt auf 0, es wird die Gesamtheit des Artikels berücksichtigt. Wenn eingestellt auf Auto Es ist der Abstand um den Inhalt des Elements, dessen Größe geändert wird. Mit anderen Worten, ignoriert bei der Berechnung die Größe des Inhalts des Elements und Auto berücksichtigt es. Da ist ein praktisches Diagramm bereitgestellt vom W3C, das dies erklärt.

Flexbasis:0 ist besonders nützlich, wenn Sie Elemente unabhängig von ihrem Inhalt gleichmäßig verteilen möchten.

Wie oben erwähnt, ist die biegen Eigenschaft ist eine Abkürzung für diese Eigenschaften und Sie werden feststellen, dass es die zuverlässigste Methode zum Festlegen dieser Werte ist.

Die Reihenfolge der Werte ist Flex-Wachstum, Flex-Schrumpf, Flex-Basis. Um also einen Wachstumswert von 2, einen Schrumpfwert von 1 und eine Basis von 0 festzulegen, würden Sie Folgendes verwenden:

.room { Hintergrund:#00AAF2; Höhe:90px; Flex: 2 1 0; }

Ordnung kontrollieren mit Flexbox

Eine der besten Funktionen von Flexbox ist die Möglichkeit, die Reihenfolge der Elemente zu ändern, ohne dass sich dies auf das Markup auswirkt. Dies ist besonders nützlich für die Barrierefreiheit, da es uns ermöglicht, Markups entsprechend zu codieren und sie dann optimal anzuzeigen.

Dazu verwenden wir die Artikel Befehl Eigentum.

In unserem Beispiel liegt der Waschraum direkt neben der Küche. Mir wäre es lieber, wenn es neben den Schlafzimmern wäre, damit ich morgens direkt unter die Dusche springen kann, also lasst uns es verlegen. Es ist derzeit der 2. Artikel, wir möchten, dass es der dritte ist. Also haben wir es eingestellt Befehl Eigentum entsprechend.

.washroom { height:60px; Reihenfolge:2; }

Sehen Sie, wie es bis zum Ende der Reihe hüpfte? Es liegt neben den Schlafzimmern, aber nicht so, wie wir es beabsichtigt hatten. Dies ist ein großes Problem bei Flexbox, da viele Entwickler (ich eingeschlossen) zunächst damit rechnen Befehl um wie ein Array zu funktionieren.

Lesen:  So zeigen Sie Traffic in WordPress mit Beitragsansichten für Jetpack an

Befehl funktioniert tatsächlich wie CSS’ Z-Index, Das heißt, wenn Sie nicht explizit eine festlegen Befehl Bei einem Artikel wird davon ausgegangen, dass er in der Reihenfolge niedriger liegt als bei einem Artikel, für den explizit ein Wert festgelegt wurde.

Wir möchten, dass der Waschraum mit der Lounge ausgetauscht wird, den einzigen anderen Gegenständen, die einen benötigen Befehl sind die SchlafzimmerS.

.washroom { height:60px; Reihenfolge:2; } .schlafzimmer { order:3; }

Beachten Sie, wie beides SchlafzimmerHaben Sie dieselbe Bestellnummer? In solchen Fällen greift der Browser auf die DOM-Reihenfolge zurück.

Ausrichtung brechen

Die letzte Artikeleigenschaft ist align-self. Es wird verwendet, um die Ausrichtung des Elements auf der Sekundärachse zu ändern. align-items wird verwendet, um alle Elemente auszurichten, und diese Eigenschaft gibt Ihnen die Möglichkeit, diese pauschale Einstellung zu deaktivieren.

Es nimmt die gleichen fünf Werte an wie die entsprechende Eigenschaft im Container: Grundlinie, Mitte, Flex-Ende, Flex-Start, Und strecken.

.washroom { height:60px; Reihenfolge:2; align-self:flex-end; }

Modernes Weblayout mit Flexbox

Flexbox ist eine leistungsstarke Option zum Layouten von Inhalten. Obwohl es nicht zum Layouten ganzer Seiten gedacht ist, unterstützt es es hervorragend Gitterstruktur macht es zu einer großartigen Option, insbesondere für Mobile-First-Websites.

Zur Veranschaulichung werden wir eine einfache Seite zusammenstellen, die einige der oben beschriebenen Techniken verwendet.

Erste Schritte

Zunächst geht es um unser Markup und einige grundlegende Stile für die Seite.

Flexbox-Demo

GoogleFonts

400: Missing font family

The requested font families are not available.

Requested:Open Sans (style:normal,weight:400)

For reference,see the Google Fonts API documentation.

  • A
  • B
  • C
  • D
  • E
  • F
  • G

Ich habe ein Div mit der ID Seite. Innen Seite Ich habe eine ungeordnete Liste mit Nachrichten. Im Anschluss an die Nachrichten habe ich die Header, aus Gründen der Barrierefreiheit unterhalb des Nachrichteninhalts. Endlich habe ich eine Fusszeile.

Ändern der Inhaltsreihenfolge

Das erste, was ich tun möchte, ist, das zu verschieben Header bis zum Seitenanfang. Dazu legen wir fest Seite ein Flexbox-Container sein. Dann geben wir die Richtung vor Spalte. Weisen Sie dann jedem einen Auftrag zu Seiteist die untergeordneten Elemente.

#page { display:flex; } #page { display:flex; Flex-Flow:Spalte; } #header { order:1; } #news { order:2; } #footer { order:3; }

Ineinander schachtelbare Flexbox-Container

Der nächste Schritt besteht darin, das zu gestalten Header. Untergeordnete Elemente in Flexbox-Containern können eigenständige Flexbox-Container sein, sodass wir Flexbox verwenden können, um sie gleichmäßig zu verteilen Header Elemente.

Stellen wir das ein Header Um einen Flexbox-Container zu erstellen, verteilen wir den Inhalt gleichmäßig, ohne zusätzliche Polsterung an den Seiten, und stellen schließlich sicher, dass die Menüelemente auf derselben Grundlinie wie das Logo liegen.

#header { order:1; Anzeige:flex; justify-content:space-between; align-items:baseline; }

Komplexe Inhaltsverpackung

Unsere Nachrichten dienen als Platzhalter für Sondermeldungen und müssen daher eine beträchtliche Größe haben, um Platz für Text, ein Bild oder ein Video zu schaffen. Wir brauchen sie also zum Einpacken.

Stellen wir das ein Nachricht div soll ein Flexbox-Container sein. Als nächstes geben wir das NachrichtEs gibt einige Mindestmaße und etwas Farbe, damit wir sie deutlich sehen können.

#news { order:2; Anzeige:flex; } .newsItem { min-width:300px; Mindesthöhe: 250 Pixel; Hintergrund:#79797B; Rahmen: 1 Pixel durchgehend #706667; }

Jetzt müssen wir das einstellen Nachricht Behälter zum Einwickeln, und der Nachrichts zu erweitern, um den verfügbaren Platz zu füllen.

#news { order:2; Anzeige:flex; Flex-Flow: Zeilenumbruch; }

Die Herausforderung, vor der wir jetzt stehen, besteht darin, dass, wenn die Nachrichts sind nicht gleichmäßig verteilt, das größte Element (G) liegt unten. Auf den meisten Websites möchten wir den obersten Inhalten den größtmöglichen Platz einräumen. Wir können dies beheben, indem wir den Wrap auf setzen Wrap-Reverse.

#news { order:2; Anzeige:flex; flex-flow:row wrap-reverse; }

Dadurch werden die Artikel neu angeordnet, aber von oben links betrachtet sind sie jetzt nicht mehr in der richtigen Reihenfolge. Wir müssen also die Reihenfolge umkehren, indem wir die Richtung auf festlegen Reihenrückwärts.

#news { order:2; Anzeige:flex; Flex-Flow: Row-Reverse Wrap-Reverse; }

Dadurch werden die Elemente in fortlaufender Reihenfolge angeordnet, von links nach rechts und von oben nach unten. mit den größeren Gegenständen immer oben. Aber ich möchte nicht die Reihenfolge der Storys in meinem Markup ändern müssen, um zu erzwingen, dass Element A vor Element B kommt. Das Letzte, was ich also tun muss, ist, die Reihenfolge der Elemente zu ä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; }

Mischen von Flexbox- und Medienabfragen

Das letzte zu gestaltende Element ist das Fusszeile. Wir wollen es so gestalten, wie das Header, aber weil die Fusszeile hat nur drei untergeordnete Elemente (im Vergleich zu Headerist vier) werden wir den Absatz so einstellen, dass er doppelt so breit ist wie das Logo und die Liste.

#footer { order:3; Anzeige:flex; align-items:baseline; Flexrichtung:Reihe; } #footer > * { flex:1; } #footer > p { flex:2; padding-right:2em; }

Das funktioniert gut bei Desktop-Größen, aber wenn Sie Ihren Browser verkleinern, werden Sie feststellen, dass er auf kleinen Geräten zu eng ist. Ändern wir also den Code so, dass er als Spalten unter 600 Pixel angeordnet ist und zu einer Zeile über 600 Pixel zurückkehrt.

#footer { order:3; Anzeige:flex; align-items:baseline; Flex-Richtung:Spalte; Polsterung:2em 0; } #footer > * { flex:1; } #footer > p { flex:2; } @media only screen and (min-width:600px) { #footer { flex-direction:row; Polsterung:0; } #footer > p { margin-right:2em; } }

Abschluss

Und da haben Sie es. Ein moderner Ansatz zur Gestaltung von Inhalten auf einer Webseite, der weithin unterstützt und einfach zu implementieren ist.

Die Stärke von Flexbox besteht darin, dass seine Eigenschaften kombiniert werden können, um uns eine präzise Kontrolle über unsere Layouts mit der einfachsten möglichen Syntax zu geben.

Aktuelle Artikel:

Empfohlen