Wie kann ich mit flexbox ein komplexes, responsives HTML-Layout erstellen?
Ich habe Flexbox untersucht, um ein reaktionsfähiges Layout wie unten abgebildet zu erreichen. Leider habe ich immer noch nicht herausgefunden, wie man ein Desktop-Layout wie in Abbildung 1 erhält, das sich auf Ansichtsfenstern mit weniger als 414 Pixel neu anordnet.
Abbildung 1 (Desktop-Ansichtsfenster)
Abbildung 2 (mobile Ansichtsfenster)
(skalierte Version)
Klicken Sie hier für Bild in Originalgröße
Mein Code bisher:
Meine Frage
Ist das mit der flexbox überhaupt möglich? Gibt es für dieses Layout eine bessere Alternative?
5 Antworten
Obwohl diese Frage explizit nach einem Flexbox-Ansatz gefragt hat, gibt es einen anderen Weg, um mit einfachen Gleitkommazahlen zu erreichen.
Eine Medienabfrage ermöglicht es, die Elemente in weniger als 414 Pixel Breite in der gewünschten Reihenfolge neu anzuordnen:
Beachten Sie, dass ich padding-bottom verwendet habe, um das Seitenverhältnis der Elemente in diesem Beispiel beizubehalten (weitere Informationen finden Sie in dieser Antwort ).
Ich weiß nicht, welchen Inhalt Sie in die Blöcke stecken wollen, aber Sie müssen absolut positionnig dafür verwenden, wenn Sie bei der "Padding-Technik" bleiben wollen. Für reinen Text können Sie diese Geige überprüfen.
Das Problem besteht darin, dass Flex-Objekte des gleichen Flex-Containers vorhanden sein müssen, wenn Sie alle Elemente neu anordnen möchten. Flexbox bietet jedoch keine direkte Möglichkeit, ein Element mehr als eine Flex-Linie zu belegen.
Sie können jedoch mehrere Container verwenden und display: contents :
Das Element selbst generiert keine Boxen, sondern seine Children und Pseudo-Elemente erzeugen immer noch Boxen als normal. Für die Zwecke der Box-Generation und Layout, das Element muss behandelt werden, als ob es hatte wurde mit seinen Kindern und Pseudo-Elementen im Dokument ersetzt Baum.
Das einzige Problem ist, dass display: contents noch nicht weit verbreitet ist, aber Sie können sehen, dass es in Firefox funktioniert.
Ich denke nicht, dass dies mit reinem CSS möglich ist, aber Sie könnten einige js verwenden und die HTML-Struktur bei der Größenanpassung mit wrapAll() und unwrap() ändern. Sie müssen auch media queries verwenden, um die Reihenfolge und einige CSS zu ändern, wenn das Fenster & lt; 414px.
Sie suchen nach der Syntax des experimentellen Rasters. Flexbox eignet sich für kleinere, Widget- oder Komponentenlayoutsysteme. Grid ist für das gesamte Seitenlayout und es ist großartig.
Tatsache ist, dass Grid momentan nur in IE, Edge und den kommenden Safari-Browsern unterstützt wird, aber Firefox und Chrome-Support ist angeblich gleich um die Ecke, und Sie können es heute ausprobieren, indem Sie die richtige Entwickler-Flagge aktivieren diese Browser.
Hier ist ein Beispielcode, aber es wird nur funktionieren, wenn Ihr Browser die neue Grid-Syntax unterstützt.
Ich sehe, dass Sie zwei Behälter mit Schwimmer machen können und wie oben erwähnt flüssige Stilseite mit der Breite% verwenden. Wenn Sie ein mobiles Ansichtsfenster verwenden, verwenden Sie Medienabfragen, um Haltepunkte zu deklarieren.
Tags und Links html css layout responsive-design flexbox