Ich habe kaum eine Website gesehen, die Flex für die Reaktionsfähigkeit verwendet.

Quelle von CanIUse

  

CSS Flexible Boxes Layout-Spezifikation ist am Kandidaten   Empfehlungsphase, nicht alle Browser haben es implementiert. Webkit   Implementierung muss mit -webkit vorangestellt werden; Internet Explorer   implementiert eine alte Version der Spezifikation, vorangestellt; Oper 12.10   implementiert die neueste Version der Spezifikation, ohne Präfix. Siehe die   Kompatibilitätstabelle für jede Eigenschaft für eine aktuelle Kompatibilität   Status.

Flexbox

Der neue flexbox-Layout-Modus ist dazu da, Layouts in CSS neu zu definieren. Leider hat sich die Spezifikation in letzter Zeit stark verändert, daher wurde sie in verschiedenen Browsern anders implementiert. Es gibt viele veraltete Flexbox-Ressourcen.

Flexbox hat viele spannende Funktionen, wie es

• kann in jeder Flussrichtung (nach links, nach rechts, nach unten oder sogar nach oben!) ausgelegt werden.
• kann die Anzeigereihenfolge auf der Stilschicht umgekehrt oder neu angeordnet haben (d. h. die visuelle Reihenfolge kann unabhängig von der Quellen- und Sprachreihenfolge sein)
• kann linear entlang einer einzigen (Haupt-) Achse angeordnet oder in mehrere Linien entlang einer sekundären (Quer-) Achse gewickelt werden
• kann seine Größe anpassen, um auf den verfügbaren Platz zu reagieren
• kann in Bezug auf ihren Container oder einander
ausgerichtet werden
• kann dynamisch entlang der Hauptachse ausgeblendet oder dekomprimiert werden, während die Kreuzgröße des Containers beibehalten wird.

Das Problem mit dem alten Box-Modell

Betrachten Sie den folgenden Code zur Verwendung mit einem dreispaltigen Layout.

Das gibt Ihnen keine Spalten, die 33.33% wide sind, es werden Spalten erstellt, die 43.33% wide. sind. Dies wird das 3-Spalten-Layout unterbrechen, da die kombinierte Breite der Spalten 100% überschreitet. Mit anderen Worten, die Auffüllung wird zu der bereits vorhandenen Breite hinzugefügt. Also ist es padding + width.

Wenn Sie ein 3-Spalten-Layout erstellen müssen, verwenden Sie normalerweise float (oder Inline-Block) und ermitteln dann die erforderlichen Breiten, Abstände und Ränder, damit sie in den übergeordneten Container passen. Es ist eine unnötige Menge an Arbeit, die man gerne vermeiden würde, auch wenn sie inzwischen zur zweiten Natur geworden ist.

Ich habe ein gutes Tutorial für den aktuellen Status der Flexbox hier gefunden.

Bekannte Probleme von CanIUse

• Firefox unterstützt die Angabe von Breiten in Prozent nicht. Siehe Fehler .
• IE10 und IE11 Standardwerte für flex sind 0 0 auto ( siehe hier ) anstatt 0 1 auto , laut Entwurf der Spezifikation, Stand September 2013.
• Firefox unterstützt keine flex-wrap-, align-content-Eigenschaften. Siehe Fehler
• In IE10 und IE11 berechnen Container mit display: flex und flex-direction: column die Größe der gebeugten Kinder nicht korrekt, wenn der Container min-height , aber keine explizite Eigenschaft height aufweist. Fehler anzeigen .
• In Chrome und Safari wird die Höhe von (nicht flexiblen) Kindern in Prozent nicht erkannt. Firefox und IE erkennen und skalieren die Kinder jedoch anhand der prozentualen Höhe.

Referenzen

1. Editor's Draft

2. Tauchen Sie ein in Flexbox

3. Flexbox Tutorial 2013 (aktualisiert 2013)

4. Anleitung zu flexbox

Was ist Flexbox?

Flexbox-Definition wie in W3C-Spezifikationen angegeben:

  

Die Spezifikation beschreibt ein CSS-Box-Modell, das für das Design der Benutzeroberfläche optimiert wurde. Im Flex-Layout-Modell können die untergeordneten Elemente eines flexiblen Containers in jeder Richtung angeordnet werden und können ihre Größe "biegen", indem sie entweder wachsen, um ungenutzten Platz zu füllen, oder schrumpfen, um ein Überlaufen des übergeordneten Elements zu vermeiden. Sowohl die horizontale als auch die vertikale Ausrichtung der Kinder kann leicht manipuliert werden. Durch das Verschachteln dieser Boxen (horizontal in der Vertikalen oder vertikal in der Horizontalen) können Layouts in zwei Dimensionen erstellt werden.

Flexbox ist nicht nur eine Eigenschaft, sondern ein ganzes Modul mit einer Reihe von Eigenschaften, die den Fluss und die Positionierung von Elementen innerhalb des Elternelements beeinflussen (normalerweise eine Art Wrapperdiv), sobald es als Flex-Container definiert ist. Dies geschieht mit display: flex .

Ressourcen auf flexbox:

• CSS-Tricks-Handbuch zu flexbox

• MDN-Leitfaden

• Opera-Artikel zu Flexbox-Grundlagen

Vorteile

Mit Flebox haben wir mehr Kontrolle über die Ausrichtung und das Verhalten von Boxen / divs / Seitenelementen beim Ändern der Bildschirmgröße oder der Geräteausrichtung.

Ohne flexbox sind Methoden zum Erreichen eines flexiblen Layouts:

• floats - Im Grunde genommen handelt es sich um einen Hack, da der ursprüngliche Inhalt darin besteht, dass Teile des Inhalts die Position ändern können, ohne sie aus dem Dokumentenfluss zu entfernen (z. B. Bilder um den Text herum positionieren). Sie werden meistens für horizontales Stapeln verwendet, oft in Verbindung mit Medienabfragen und clearfix hack.

• relative Einheiten (% oder em) für die Dimensionierung - funktioniert in den meisten Fällen gut für horizontales Layout, bietet aber keine oder nur wenig Kontrolle für die vertikale Ausrichtung.

• Medienabfragen - verwendet in Verbindung mit den oberen Techniken MQ machen Stapel von RWD, aber in komplexeren Fällen neigen dazu, unordentlich geworden, da jede Abfrage alle Eigenschaften enthalten muss, die Größe und Position beeinflussen Element, das wir anpassen möchten (Breite, Höhe, Füllung, Ränder, Anzeige usw.).

• JavaScript - dynamische Änderung von Elementeigenschaften basierend auf anderen Variablen. Auch Hacky-Lösung, oft nicht sehr sauber, Besteuerung auf Seitengröße und Leistung und offensichtlich JS abhängig.

Flexbox ist zum Teil "shorthanding" Kombinationen der oben aufgeführten Methoden, hat aber auch drei Vorteile:

• Einstellung der flexiblen Breite / Höhe der Elemente abhängig vom verfügbaren Platz
• vertikale und horizontale Zentrierung ohne Hacks und Workaround-Lösungen
• Ändern der Reihenfolge der Elemente innerhalb des Layouts, ohne die Markup- und Dokumentstruktur zu beeinflussen (mit order property oder flex-flow ).

Für konkretere Beispiele überprüfen Sie bitte die am Ende dieser Antwort aufgeführten Links.

Syntax und Browserunterstützung

Im Laufe der Zeit gab es einige wesentliche Änderungen bezüglich der Flexbox-Syntax in verschiedenen Browsern, die in diesem Artikel ziemlich gut erklärt sind Aber mit der breiten Einführung von Prefix-Tools wie autoprefixer können wir uns einfach an die neueste Standardsyntax halten und Präfixe automatisieren (autoprefixer bietet die Möglichkeit, das zu definieren weit zurück wollen wir in Bezug auf Browser-Unterstützung gehen).

Das heißt, Flexbox wird in allen gängigen Browsern mit Ausnahme von IE 9 und niedriger unterstützt. Opera unterstützt flexbox seit Version 12.1 und bietet keine Unterstützung auf Opera Mini (was für ein Schock). Für viele bestehende Standorte bedeutet die Verwendung von flexbox wahrscheinlich eine Menge Arbeit für begrenzte Vorteile, aber als IE 8 und 9 Nutzung sinkt die Flexbox-Implementierung.

Wann und wie sollte verwendet werden?

Wie in diesem Artikel hervorgehoben wurde, ist die Verwendung von flexbox nicht vorgesehen zum Erstellen von vollständigen Seitenlayouts (dafür gibt es das Modul css grid , das momentan funktioniert und witzigerweise nur unterstützt wird durch IE), sondern um kleinere Einzelkomponenten wie Navigationen und Sidebar-Elemente zu manipulieren.

Für jetzt könnte man wahrscheinlich Support über Modernisierer erkennen und Fallback für IE lte 9 oder Fallback-First machen, indem man sich an universelle Arbeitsgrundlagen hält und sie erweitert, um bessere Erfahrungen mit Browsern zu bieten, die damit umgehen können (ich würde letzteres empfehlen ). Wie immer hängt es von konkreten Projektanforderungen und Besucherprofilen ab, ob die flexbox überhaupt verwendet werden soll oder nicht.

Anwendungsbeispiele

Ich habe keine realen Beispiele für die Verwendung von flexbox, aber hier sind einige Links für Anwendungsfälle, die mit flexbox leicht lösbar sind:

• Boxen, die Höhe füllen (oder mehr) (und nicht quetschen)

• Gelöst von flexbox

• Elemente mit flexbox zentrieren

• Tricks mit Flexbox für bessere CSS-Muster

• Flexbox-Cheatsheet

Ich würde sagen, dass der Hauptvorteil des Flexible Box Layout Moduls darin besteht, dass alles für Sie berechnet wird. Sie müssen nicht berechnen, wie viel Platz ein Element mit Rändern, Padding usw. einnehmen wird. Es wird automatisch ausgeführt.

Hervorragend geeignet für die Auflistung auf E-Commerce-Websites oder Websites, die auf Produkten wie Buchhandlungen usw. basieren. Nehmen wir an, Sie haben einen Anzeigebereich von 600 x 600 Pixel, damit Ihre Produkte aufgelistet werden können. Jede Produktbox hat eine dynamische Breite aufgrund des Produktbildes innerhalb, horizontal oder vertikal. Flex ordnet diese Schachteln so schön an, dass keine passenden Schachteln darunter fallen und die verbleibenden Schachtelbreiten und -höhen arrangiert werden.

Für die Browserunterstützung w3schools gibt

  

Die Eigenschaft box-flex wird nur von Opera unterstützt.

     

Internet Explorer 10 unterstützt eine Alternative, die Eigenschaft -ms-flex.

     

Firefox unterstützt eine Alternative, die -moz-box-flex-Eigenschaft.

     

Safari und Chrome unterstützen eine Alternative, die -webkit-box-flex   Eigenschaft.

     

Hinweis: Flexible Boxen werden in Internet Explorer 9 und nicht unterstützt   frühere Versionen.