5 Fallstricks, um beim Wechsel zum Flexbox -Layout -System von Divi 5 zu vermeiden

Divi 5 hat gerade sein all -neues Flexbox -Basis -Layout -System verschickt. Es ersetzt den alten Block -Layout -Engine von Divi 4 und schaltet leistungsstarke neue Steuerelemente direkt im visuellen Bauunternehmer frei. Jede neue Zeile ist jetzt standardmäßig das Layout. Wenn Sie nicht bereits CSS Flexbox verwendet haben, erfordert diese Änderung eine neue Design -Denkweise, da Flex anders funktioniert. Wenn Sie Ihre Gewohnheiten nicht einstellen, bleiben Sie stecken.

Dieses Update bietet Ihnen visuelle Steuerelemente für Verpackung, Richtung, Abstand, Bestellung und Ausrichtung - alles integriert. Kein hacky -benutzerdefiniertes CSS. Es wird außerdem mit vorkonfigurierten Zeilenverknüpfungen geliefert, um komplexe Reihenstrukturen mit minimaler Anpassung der Anzeigeeinstellungen zu erstellen. Einige blockbasierte Funktionen wie Spezial- und Abschnitte mit voller Breite sind veraltet, da Flex jetzt alle diese Anwendungsfälle abdeckt.

Dieser Beitrag geht in die fünf größten Fallstricke, die Sie beim Wechsel Ihres mentalen Modells von Block auf Divi 5 drücken werden.

Fallstrick Nr. 1: Flex in eine Block -Denkweise zwingen

→ Flex erfordert ein neues mentales Modell, nicht nur neue Kontrollen.

Niemand mag Veränderungen, es sei denn, sie wissen, dass sie sehr reale Einschränkungen treffen. Für viele ist das alte Layout -System das, was sie wussten und mit denen sie sich wohl fühlten. Aber es hatte seine Grenzen. Diejenigen, die genug über CSS wussten, wussten, dass dem alten System Dinge fehlte, die Flexbox für Abhilfe entwickelt hatte. Das Vermeiden der ersten Gefahr erfordert das Verständnis, dass Flexbox nicht nur ein Blocklayout mit zusätzlichen Optionen ist.

In Divi 4 stapelten Module standardmäßig vertikal - jedes Element stand unter dem vor ihm. Sie können die Dinge horizontal mit Spalten stapeln, aber an diesem Punkt arbeiten Sie mit mehreren Zeilen + Spalten in einem Abschnitt, um ein Layout zu erstellen. Das war für viele vorhersehbar und komfortabel, aber es führte auch dazu, dass zwei Knöpfe nebeneinander und andere Designherausforderungen nicht in der Lage waren, zwei Knöpfe zu haben.

Divi 5 funktioniert jetzt anders, da neue Container (dh Abschnitte, Zeilen, Spalten und Gruppen) standardmäßig auf „Flex“ eingestellt werden. Auf der Behälterebene erhalten Sie spezifischere Optionen für die Anordnung von untergeordneten Elementen. Flexbox ist leistungsstark, da es flexible Layouts ermöglicht, bei denen Elemente basierend auf dem verfügbaren Platz und den darin enthaltenen Inhalten positioniert werden. Mehr dazu in der nächsten Fallstrick . Auf diese Weise können sich Layouts an unterschiedliche Bildschirmgrößen und Inhalte anpassen, ohne sich auf feste oder absolute Positionierung zu verlassen. Hier ist nur ein Beispiel, um Flex mit Block zu vergleichen.

Block -Layout -Stapel module vertikal entlang der Blockachse. Mit Flexbox können Sie zwischen Zeile und Spalte als Hauptachse wählen.

Jede Einstellung und Option in der Benutzeroberfläche entspricht direkt den tatsächlichen CSS -Eigenschaften, die jedem Container hinzugefügt wurden.

Fallstrick Nr. 2: Nicht zu wissen

→ Ohne Schrumpfung und Wachstum verhalten sich Ihre Layouts nicht wie erwartet.

Mit Flex in Divi 5 können Kindermodule eine festgelegte Breite oder Höhe haben. Zusätzlich können sie je nach Raum im Behälter schrumpfen oder füllen (ihre Breite oder Höhe). In diesem Beispiel werden Textmodule auf 45% Breite eingestellt, was bedeutet, dass zwei Module horizontal wie in derselben Zeile passen. Wenn wir jedoch eine ungerade Anzahl von Textmodulen hinzufügen, möchten wir nicht, dass es leerer Raum gibt. Wir können diese Module so einstellen, dass Flex wächst. Wenn dann Platz in einer Reihe verfügbar ist, werden diese Module zum Füllen wachsen.

Divi enthält Kontrollpersonen wie „Wachsen zu füllen“, „Schrumpfen zu passen“ und benutzerdefinierte Einstellungen für untergeordnete Elemente in einem beliebigen Flex -Behälter (untergeordnetes Element> Design> Größe> Wachstum zu füllen, zu verkleinern oder benutzerdefiniert ).

Das Einstellen von Höhe und Breite von Kinderelementen ist bekannt, wenn Sie Layouts blockieren. Mit Flexbox, Wachsen- und Schrumpfeinstellungen können Sie jedoch die feste Größe mit reaktionsschnellem Verhalten kombinieren und sich an den verfügbaren Speicherplatz in jedem Container anpassen. Es fügt Komplexität hinzu, entsperren aber auch weitaus mehr Flexibilität.

Schrumpfen zu passen und zu füllen (zusätzlich zur Flex-Base) sind auch sehr praktisch, wenn Sie reaktionsschnelle Layouts erstellen. Damit Blocklayouts häufig reagieren, mussten Sie an jedem dieser Haltepunkte mehrere Haltepunkte und Breiten/Höhen einrichten. Flexbox kann von eindeutigen Einstellungen an verschiedenen Haltepunkten profitieren, aber wie der Name schon sagt, ist es sehr flexibel . Dies ist insbesondere bei der Verwendung von Clamp () für die Typografie der Fall. Wenn Sie beide zusammen mit anderen relativen CSS -Einheiten zusammen verwenden, wird Ihr ständiges Bedürfnis nach Haltepunkten verstoßen.

Schauen wir uns ein anderes Beispiel an, das mit Flexbox erstellt wurde.

Der Spaltencontainer (übergeordnet) wird mit diesen Einstellungen auf Blex eingestellt:

• Horizontaler und vertikaler Lücke : 30px (dies könnte Calc oder Clamp verwenden, um sogar etwas besser zu sein)
• Layout -Richtung : Row Reverse (Erläuterung für diese Entscheidung in Fallstrick Nr. 4)
• Inhalt rechtfertigen : Zentrum
• Ausrichtung von Gegenständen : Zentrum
• Flex Wrap : Wrap Reverse (Erläuterung für diese Entscheidung in der Fallstrick Nr. 4)

Ich habe dann drei Kinderelemente in die Säule platziert. Ein Überschriftenmodul, ein Teilermodul und ein Textmodul. Hier sind die relevanten Einstellungen für jeweils:

• Überschriftenmodul
  • Textgröße : Clamp (2REM, 1,5REM + 2VW, 3REM)
  • Breite : Auto
  • Flex Größe : Schrumpfen zu passen
• Trennmodul
  • Breite : Auto
  • Flexgröße : Schrumpfen, um zu passen und zu füllen wachsen
• Textmodul
  • Textgröße : Clamp (0,9375REM, 0,75REM + 0,4 VW, 1REM)
  • Breite : Auto
  • Flex Größe : Schrumpfen zu passen

Mit einer Reihen -Flex -Richtung stehen Kinderelemente horizontal aus, wenn es Platz gibt. Das Textmodul ist am breitesten und füllt also seine eigene Zeile. Das Trennmodul wächst oder schrumpft dann, da es automatisch widt und sowohl Flex-Grew- als auch Flex-Shrink aktiviert ist. Das Header -Modul verwendet nur seine intrinsische Breite und bleibt kompakt. Dieses Setup ergibt ein vollständig reaktionsschnelles Layout ohne Breakpoints.

Fallstrick Nr. 3: Die Randgewohnheit nicht brechen

→ Verwenden Sie stattdessen Lücke - es ist schlauer, sauberer und für Flex hergestellt.

In Divi 4 erforderten visuelle Lücken zwischen Modulen und anderen Elementen Ränder (vertikale Lücken über den unteren Rand, horizontale Lücken über den linken/rechten Rand). Als die Lücke auf den Säulenabstand angewendet wurde, hatte Divi 4 eine Dachrinneneinstellung, aber es wurde keine Standard -CSS -Werte benötigt und verwendete tatsächlich den Rand an den Seiten der Spalten, um die Lücke zu erstellen. Dies ist genauso wie funktionieren Blocklayouts noch. Aber jetzt gibt es einen saubereren, effektiveren Ansatz.

Das FlexBox -System von Divi 5 führt in der Design> Layout > Horizontal und vertikaler Lücke in Zeile und vertikale Lücke . Diese Karte zu CSS Gap und Row-Lack. Die vertikalen Lücken gelten automatisch für jede „Flex -Reihe“, wenn Elemente auf eine neue Linie einwickeln. Gleiches gilt für horizontale Lücken: Immer wenn es Kinderelemente nebeneinander gibt, ist die Lücke vorhanden. Diese Lückeneinstellungen akzeptieren auch eine positive CSS -Einheit, sodass Sie Clamp () oder Calc () verwenden können, um reaktionsschnelle Lückenbereiche zu erstellen.

Dies verringert die Notwendigkeit, Randwerte auf jedes einzelne Kinderelement anzuwenden. Die Lückeneinstellung passt sich automatisch anhand der Flex -Richtung und der Anzahl der Kinder im Container an, um alle Lücken automatisch anzuwenden. Die Ränder haben immer noch ihren Platz, aber ihr Bedürfnis nach Abstandselementen in einem Behälter wird reduziert.

Fallstrick Nr. 4: Unterbrechung des umgekehrten Flusses und Bestellsteuerungen

→ visuelle Reihenfolge und semantische Reihenfolge müssen nicht übereinstimmen.

Standardmäßig werden untergeordnete Elemente in einem Flex -Container in ihrer Quellreihenfolge angezeigt. Flexbox und Divi 5 bieten Ihnen die Möglichkeit, umgekehrte Flex -Richtungen und Bestellsteuerungen anzugeben, um den visuellen Elementfluss zu ändern, ohne die HTML -Reihenfolge von Elementen zu ändern.

Mit der umgekehrten Richtung, die unter Layout -Richtung umschaltet, können Sie die Reihenfolge der Elemente entweder in der Zeile oder in der Spaltenrichtung umkehren. Um das Layout -Beispiel aus Fallstrick Nr. 2 erneut zu betrachten, können wir sehen, warum wir dies wollen. Sie können in den Schichten sehen, dass die Reihenfolge der Kinderelemente die Überschrift, dann der Teiler und schließlich das Textmodul ist. Semantisch ist die Überschrift (in diesem Fall H2) oben im Stapel für Bildschirmleser sinnvoll. Die Überschrift ist jedoch visuell genug offensichtlich, ob zuerst oder zuletzt, da wir eine visuelle Hierarchie mit ihrer Textgröße verwenden.

Die Verwendung von Row Reverse als Flex -Richtung und Wrap Reverse behält die HTML -Bestellung (wichtig für die Zugänglichkeit) bei und ermöglicht es mir, Dinge zu entwerfen, wie wir sie uns vorstellen.

Sie können das gleiche mit der Bestellung unter dem untergeordneten Element erreichen, das in Divi zu finden ist, wenn Sie auf die Einstellungen eines untergeordneten Elements> in der Registerkarte Inhalt> in der Bestellung klicken. Wir können die Reihenfolge ändern, in der nur dieses Element erscheint. In diesem Beispiel erreichen wir das gleiche Endergebnis, aber mit einer anderen Einstellung - eine, die für einige sinnvoller ist.

Fallstrick Nr. 5: Vergessen, Wrap zu setzen

→ Flex wird nicht auf neue Zeilen brechen, es sei denn, Sie sagen es.

Wir haben erwähnt, dass wir früher eingewickelt sind, aber es verdient seinen eigenen Abschnitt. Neue Flex -Container standardmäßig ohne Verpackung. Dies kann unerwartete Konsequenzen haben. Wenn Sie beispielsweise vier untergeordnete Module mit einer Breite von jeweils 50% hinzufügen, erwarten Sie, dass sie auf zwei Flexreihen angezeigt werden. Ihr Problem ist einfach, dass Sie Ihren Container zulassen müssen, um einzuwickeln.

Divi enthält einen Umschalter namens Layout-Verpackung, der drei Zustände hat : No-Wrap, Wrap und Wrap-Reverse. Sie müssen Wrap aktivieren, wenn Sie möchten, dass Module an einem Schwellenwert in neue Zeilen brechen. So unterstützt Divi Multi-Reihen-Strukturen in einem einzigen Behälter (verschachtelte oder mehrere Zeilen sind jetzt nicht die einzige Möglichkeit, dies jetzt zu tun).

Nehmen Sie sich Zeit, um Flexbox zu meistern

Flex in Divi 5 ist leistungsstärker als Divis vorheriges Block-Layout-System. Es erfordert jedoch ein gewisses Erlernen zu verstehen. Flexbox ist keine divispezifische Einstellung, daher ist es wichtig, dass Sie die Grundlagen des Funktionierens dieses CSS-Tools kennen. Divi erleichtert die Implementierung, da alle Einstellungen, die Sie in CSS anwenden können, direkt im Editor erhältlich sind. Aber das Konzept unterscheidet sich sehr vom Block.

Aufgrund dieser Unterschiede empfehlen wir Ihnen dringend, eine Stunde mit einem interaktiven Lehrwerkzeug zu verbringen, um Flexbox zu verstehen. Eine, die einfach zu bedienen ist und wirklich macht, ist FlexboxFroggy.com. Es führt Sie durch 24 progressiv komplexe Herausforderungen und lehrt Ihnen alle Grundlagen. Es ist viel besser als eine Stunde lang zum Doomscrolling.

Verwenden Sie heute Flex mit Divi 5

Flexbox in Divi 5 ist ehrlich. Es erraten nicht, was Sie wollen. Es fordert Sie auf, sich zu entscheiden. Aber sobald Sie sich entschieden haben, folgt die Flexibilität. Sie können jede Layoutstruktur verantwortungsbewusst, reaktionsmäßig und zuverlässig - sogar unendlich verschachtelt - ohne benutzerdefinierte CSS oder Hacks erstellen.