Accentsconagua
Hier ist der erste Artikel
Hier ist der nächste Punkt
Der dritte Punkt
Der vierte Punkt
Share
Wenn Sie vor einigen Jahren mit dem Schreiben von CSS begonnen haben, besteht die Gefahr, dass Sie sich an ein paar Macken von CSS-Layouts gewöhnt haben, die Sie als unvermeidlich angesehen haben. Verwenden Sie zum Beispiel absolut positionierte Elemente in relativ positionierten Elementen oder verwenden Sie Clearfix in Verbindung mit Schwimmern zur Erreichung von Säulenrastern.
Intuitiv haben wir alle gedacht, dass es einen besseren Weg geben sollte. Es ist schon ein bisschen seltsam, dass die beste Lösung für die vertikale Zentrierung die Verwendung der Lösung war Anzeige: Tisch; und zugehörige Stile. Warum sollten wir verwenden? Hacks grundlegende Dinge zum Laufen bringen?
Das flexible Box Modul oder Flexbox Kurz gesagt, ist die aufkommende Lösung für viele unserer vergangenen Probleme und passt zu einer Vielzahl von Designmustern, die vorherrschend sind. Die Grundidee von flexbox ist, dass die enthaltene Elementbox die Größe der Elemente ändern und neu anordnen kann, um sie optimal in den Container einzupassen.
Flexbox ist nicht unbedingt für den gesamten Standort gedacht. Die CSS-Gitterspezifikation ist in Arbeit, um dieses Problem zu beheben, ist aber leider immer noch in einem viel weniger unterstützten Zustand als Flexbox, die zumindest in allen Browsern mit Ausnahme von Opera Mini zumindest teilweise unterstützt wird. Im Gegensatz dazu wird die CSS-Rasterspezifikation nur von IE vollständig unterstützt, wobei in allen anderen Browsern keine oder keine Unterstützung möglich ist.
Flexbox soll für diskrete Teile eines Layouts verwendet werden. In diesem Artikel werden einige allgemeine Aufgaben behandelt, die mit Flexbox effektiver ausgeführt werden können, und die Syntax erläutern, wie bestimmte Ergebnisse erzielt werden. Um einen vollständigen Überblick über alle Eigenschaftsoptionen zu erhalten, werfen Sie einen Blick auf den Beitrag CSS Tricks auf Flexbox A Guide to Flexbox.
Vor der Flexbox war die vertikale Zentrierung dynamischer Inhalte eine nicht triviale Aufgabe. (In diesem Smashing Mag-Beitrag sowie in diesem CSS-Tricks-Artikel finden Sie die gesamte Geschichte.) Mit der Flexbox ist alles einfacher geworden. Wir werden einen Basiscontainer mit untergeordneten Elementen einrichten.
Vertikale Mitte testenEin sekundärer TestTertiär ist für drei
Unser Ziel ist es, diese Elemente vertikal und horizontal zu zentrieren. Mit flexbox ist das so einfach wie folgt:
.Behälter Breite: 500px; Höhe: 500px; Marge: 0 auto; Hintergrundfarbe: #dedede; / * Flex-Regeln * / Anzeige: Flex; Flex-Flow: Spalte Nowrap; Inhalt rechtfertigen: Mitte; Ausrichten-Elemente: Mitte;
Hinweis: dass wir nicht die vom Hersteller vorgegebenen Versionen verwenden, aber Sie sollten! Alternativ können Sie auch den Autoprefixer betrachten.
Sie haben hier einige unbekannte neue Regeln festgestellt; Flexbox ist ein Modul, das eine Reihe von Eigenschaften umfasst. Um zu beginnen, die Anzeige: Flex erstellt unseren Flexbox-Container und seine untergeordneten Elemente werden automatisch als Flex-Artikel behandelt.
Wenn nicht anders angegeben, fließen unsere Flex-Artikel entlang der Hauptachse inline. jedoch, Flex-Flow (was ist die Abkürzung für die Flex-Richtung und Flex-Wrap Eigenschaften) kann sowohl die Hauptachse als auch die Querachse verändern. Flex-Flow: Spalte Nowrap teilt Flexbox mit, dass wir möchten, dass unser Inhalt in einer vertikalen Spalte angezeigt wird, und dass die Elemente nicht umbrochen werden sollen (erzwingen, dass sie zur nächsten Zeile springen)..
Inhalt rechtfertigen zu Center, Dadurch werden unsere Objekte auf die Mitte der Hauptachse ausgerichtet, die auf der durch die festgelegten Richtung basiert Flex-Flow, in diesem Fall die vertikale Achse. Ausrichtungsartikel: Mitte richtet unsere Artikel in Bezug auf die sekundäre Achse ("Kreuz") aus.
Es gibt ein inhärentes Problem bei einem traditionellen Layout-Ansatz, insbesondere beim Umgang mit responsivem Inhalt. Wenn Sie beispielsweise Floats verwenden, können Sie den Inhalt einer Seite in einer völlig anderen Reihenfolge sehen als natürlich oder kognitiv. Darüber hinaus ist es sehr schwierig, die Reihenfolge der Elemente auf einer Seite zu ändern. Mit flexbox werden wir eines der schwierigeren Layouts für traditionelles CSS in Angriff nehmen. ein oben ausgerichtetes, umgekehrtes Stapeln von Elementen. Mit anderen Worten, das Element, das erscheint zuerst im Markup wird angezeigt zuletzt Wenn Sie auf dem Bildschirm neue Elemente hinzufügen, werden diese am oberen Rand des Markups angezeigt.
Wir werden dieses Markup verwenden:
Mit dem folgenden CSS können wir erreichen, was wir versuchen, einfach zu erreichen.
Hauptposition: relativ; Höhe: 100%; Anzeige: Flex; Flex-Flow: Spaltenumkehrung Nowrap; Rechtfertigungsinhalt: Flex-End; Ausrichten-Elemente: Mitte;
Dies gibt uns genau das, was wir anstreben. Sehen Sie sich hier die Ergebnisse an (mit ein paar zusätzlichen Styles für eine einfachere Anzeige).
Erstellen Sie eine Spaltenumkehrung auf der Flex-Flow, Wir bitten Flexbox, die Reihenfolge der Artikel umzukehren. Wir möchten den Inhalt am Ende der Flexbox-Kreuzlinie ausrichten. Bei der umgekehrten Spalte handelt es sich um eine vertikale Linie, die vom unteren Rand des Kastens nach oben verläuft.
Wir setzen auch Ausrichtungsartikel: Mitte um die Elemente in der Spalte horizontal zu zentrieren. Dies ist nützlich für jede Art von Stapelung von Elementen, bei denen die kognitive Reihenfolge (zuerst bis zuletzt) nicht der visuellen Reihenfolge entspricht (von oben nach unten)..
Es gibt viele Situationen, in denen Sie Elemente anhand Ihrer Bildschirmgröße neu anordnen müssen. Die gebräuchlichen Lösungen für dieses Problem sind in der Regel kompliziert oder sie wiederholen Markup. Sehen Sie sich dieses Beispiel an, in dem wir ein angezeigtes Bild mit Hilfe der einfachen Methode vom Anfang eines Artikels an den Anfang des Artikels verschieben Auftrag Eigentum. Wir verwenden folgendes HTML:
Lorem ipsum dolor sitzt amet, eine elitäre Frau. Ipsam eum repudiandae ullam ipsum repellendus officiis eaque unde aut a porro accusamus placeat earum qui quia quidem toam harum odit voluptates?
Lorem ipsum dolor sitzt amet, eine elitäre Frau. Autem Provisioning voluptas commodi atque. Konsequenz aus dem Knochenmark und dem Knochenmark-Syndrom.
Und das begleitende CSS:
Hauptanzeige Anzeige: Flex; Flex-Flow: Zeilenumbruch; img flex-grow: 1; Breite: 200px; Reihenfolge: 3; p flex: 1 auto; Reihenfolge: 1; Polsterung: 10px; Hintergrundfarbe: #dedede; Marge: 0; p: nth-child (3) Reihenfolge: 2; Flex: 30 50px; @media only screen und (max-width: 600px) img order: 1; p flex: 1 auto; Reihenfolge: 2; Polsterung: 10px; Hintergrundfarbe: #dedede; Marge: 0; p: n-te Kind (3) Ordnung: 3; Flex: 30 50px;
Dies ist nur die Spitze des Eisbergs, wenn es um die Leistung von flexbox geht, die in wenigen Zeilen Code ausgeführt wird, was üblicherweise viel schwieriger zu erreichen ist.
Wie oft waren Sie frustriert, dass 100/3 nicht möglich war, und Sie darauf zurückgreifen, Spalten mit einer Breite von 99,9% zu erstellen, nur um zu erkennen, wie schlecht eine Lösung ist? Flexbox behebt dieses Problem ein für alle Mal. Nehmen Sie die Auszeichnung:
TestenTestenTesten
Fügen Sie das CSS hinzu, damit alle drei Spalten perfekt berechnet dargestellt werden.
.Behälter Anzeige: Flex; Inhalt rechtfertigen: Mitte; Ausrichtungsinhalt: Abstand zwischen; Hintergrundfarbe: #dadada; .spalte Breite: 100%; Polsterung: 50px; Text ausrichten: Mitte; Box-Schatten: 0 0 10px # c0c0c0;
Willst du eine kleine Rinne? Kein Problem. Fügen Sie einfach einen Rand hinzu .Säule Klasse. Die Berechnungen für den richtigen Abstand werden für Sie durchgeführt.
Werfen Sie einen Blick auf das fantastische GitHub-Repo "Solved By Flexbox", um weitere Beispiele zu erhalten. Flexbox ist ein enorm leistungsfähiges Modul, wie wir hoffen, mit diesem Artikel bewiesen zu haben. Was sind andere leistungsstarke und aufregende Anwendungsfälle, die Sie für Flexbox sehen? Lass es uns in den Kommentaren wissen!
