Verstehen Sie jede einzelne Flexbox -Einstellung in Divi 5

Flexbox und Divi 5 sind ein leistungsstarkes Duo, mit dem Divi -Benutzer atemberaubende, reaktionsschnelle Layouts erstellen können. In diesem Beitrag werden wir die ultimative Anleitung zum Verständnis und der Verwendung jeder Flexbox -Einstellung bieten, um einfach flexible, reaktionsschnelle Layouts zu erstellen.

Flexbox ist das Herzstück des überarbeiteten visuellen Builders von Divi 5 und ermöglicht es Benutzern, atemberaubende Designs mit unübertroffener Kontrolle zu erstellen. Das Flexbox -Layout -System von Divi 5 macht komplexe Layouts zum Kinderspiel, vom Ausrichten von Inhalten bis zum Erstellen dynamischer Gitter.

Lassen Sie uns eintauchen.

Was ist Flexbox?

Flexbox ist ein CSS -Layoutmodell, das es einfach macht, Elemente in einem Container zu arrangieren, auszurichten und zu verteilen, selbst wenn ihre Größen dynamisch sind. Im Gegensatz zu herkömmlichen CSS -Layouts, die auf Schwimmkörpern oder Positionierung angewiesen sind, bietet Flexbox eine intuitive Möglichkeit, flexible und reaktionsschnelle Designs zu erstellen, was es zu einem Eckpfeiler der modernen Webentwicklung macht.

Abonnieren Sie unseren YouTube -Kanal

Schlüsselkonzepte von Flexbox

Flexbox arbeitet um mehrere grundlegende Konzepte:

• Flex-Container: Das übergeordnete Element, das angezeigt wird: Flex oder Inline-Flex angewendet, erstellen Sie den Flex-Inhalt. Dieser Behälter bestimmt, wie sich seine Kinder im Layout verhalten.
• Flexgegenstände: Die direkten Kinder des Flex -Behälters, die gemäß den Flexeigenschaften des Containers angeordnet und ausgerichtet sind.
• Hauptachse und Kreuzachse: Flexbox arbeitet entlang einer Hauptachse (entweder horizontal als Zeile oder vertikal als Säule) und senkrechter Kreuzachse. Die Richtung der Hauptachse kann sich an verschiedene Modi anpassen, wie z. B. von links nach rechts, und bietet Flexibilität für globale Designs.

Flexbox in Divi 5: Eine neue Ära

Das FlexBox -Layout -System von Divi 5 ist in den visuellen Bauunternehmer integriert, sodass Divi -Benutzer reaktionsschnelle Layouts mit intuitiven Steuerelementen erstellen können. Diese Einstellungen werden hauptsächlich auf Abschnitte, Zeilen, Spalten und Modulgruppen angewendet, sodass Sie das Layoutverhalten visuell manipulieren können, ohne CSS zu schreiben. Flexbox erleichtert es einfach, Elemente auszurichten, neu zu ordnen und leicht zu transformieren.

Zugriff auf Flexbox in Divi 5

Der Zugriff auf Flexbox in Divi 5 ist unkompliziert und intuitiv. Öffnen Sie den visuellen Baumeister, fügen Sie eine neue Zeile hinzu und besuchen Sie die Registerkarte "Design". Sie finden die Flexbox -Einstellungen unter dem Layout -Dropdown.

Diese Einstellungen werden auf Flex -Container -Ebene (Abschnitte, Zeilen usw.) angewendet, wodurch das Verhalten ihrer Flexelemente gesteuert wird. Die Benutzeroberfläche von Divi zeigt Einstellungen über benutzerfreundliche Optionen an und erleichtert die Flexbox für Benutzer aller Fähigkeiten.

Gehen wir durch jede Einstellung, damit Sie besser verstehen können, wie sie funktionieren und wie sie sie verwenden, um Layouts zu erstellen.

Detaillierte Aufschlüsselung der Flexbox -Einstellungen in Divi 5

Im Folgenden finden Sie eine Anleitung zu jeder Flexbox-bezogenen Einstellung in Divi 5. Jede Einstellung enthält ihren Zweck, die verfügbaren Optionen und praktische Anwendungsfälle, mit denen Sie sie effektiv anwenden können.

Layoutstil

Flex ist die Standardoption im Dropdown -Menü Layoutstil. Wenn Sie einen Container auf Blex einstellen, wird er zu einem Flex -Behälter. Die direkten untergeordneten Elemente (Flex -Elemente) können dann mit CSS Flexbox -Eigenschaften flexibel ausgerichtet werden.

Auf der anderen Seite ist Block die traditionelle Art und Weise, wie Divi Layouts in der Vergangenheit behandelt hat. Elemente innerhalb eines Blockbehälters werden als Elemente auf Blockebene behandelt. Dies bedeutet, dass sie im Allgemeinen vertikal stapeln und die volle verfügbare Breite des übergeordneten Containers aufnehmen.

Horizontale und vertikale Lücke

In den Flexbox -Einstellungen von Divi 5 fungieren die horizontale und vertikale Lücke als CSS Gap -Eigenschaft. Sie bieten eine effiziente Möglichkeit, einen konsistenten Abstand zwischen den untergeordneten Elementen innerhalb eines Behälters zu verleihen.

Die horizontale Lücke definiert den Raum zwischen Flex -Elementen, wenn sie horizontal angeordnet sind. Im folgenden Beispiel erzeugt die horizontale Lücke den leeren Raum zwischen jeder Spalte, jedoch nicht an den Außenkanten des Flex -Behälters. Standardmäßig wird % ausgewählt, aber Sie können hier eine der CSS -Eigenschaften von Divi 5 verwenden.

Die vertikale Lücke definiert den Raum zwischen den Elementenreihen. Dies wird unglaublich wichtig, wenn Sie das Layout -Verpackung aktivieren (dazu später mehr). Es gilt auch, wenn die Layout -Richtung auf Spalten- oder Spaltenrückkehr eingestellt ist.

Layout -Richtung

Die Option zur Layout-Richtung in Divi 5 (Flex-Regisseur-Eigenschaft in CSS) ist eine der grundlegendsten Kontrollen. Es bestimmt die Primärachse, entlang der die Kinderelemente innerhalb des Behälters angeordnet werden.

Betrachten Sie es als den Fluss Ihres Inhalts. Es gibt vier Hauptoptionen: Zeilen, Zeile umgekehrt, Spalte und Spaltenrückkehr. Reihe ist die häufigste Einstellung. Flex -Artikel ordnen sich horizontal von links nach rechts an. Es ist ideal, um traditionelle horizontale Säulenlayouts, Navigationsmenüs, Seite an Seite oder zu jeder Zeit zu erstellen, die Elemente über die Seite fließen sollen.

Mit der Rückwärtsreihe arrangieren die Elemente immer noch horizontal, aber in die entgegengesetzte Richtung.

Wenn Sie die Spalte auswählen, ordnen sich die Elemente von oben nach unten vertikal an. Dies ist eine gute Option, um Module in einer einzigen Spalte zu stapeln, vertikale Inhaltslisten zu erstellen oder Layouts zu erstellen, in denen Elemente nach unten fließen müssen.

Die Spalte reverse funktioniert genauso wie die Spalte und stapelt Elemente in einem Container vertikal, jedoch in der Rückseite.

Inhalt rechtfertigen

Die Justify-Inhaltsoption von Divi 5 (die Eigenschaft der Rechtfertigung in CSS in CSS) steuert die Ausrichtung von Flex-Elementen entlang der Hauptachse des Flex-Containers.

Zu den Optionen gehören Start (Flex-Start in CSS), das Elemente auf den Beginn der Hauptachse ausrichtet. In Center werden Elemente auf die Mitte des Hauptzugriffs ausgerichtet. Wenn SieLayout -Richtung> Zeileverwenden, zentrieren sich die Elemente horizontal. Wenn SieLayout -Richtung> Spalteverwenden, zentrieren sich die Elemente vertikal.Enderichtet Elemente auf das Ende aus (entweder rechts oder unten, abhängig von Ihrer Zeile oder Spaltenauswahl).

Verwenden SiePlatz zwischenden gleichmäßigen Verteilern von Elementen entlang der Hauptachse. Das erste Element richtet sich an Start, während der letzte mit dem Ende des Containers übereinstimmt. Der Platz ums Verteiler verteilt Elemente gleichmäßig entlang der Hauptachse, wobei der gleiche Platz um jeden Gegenstand umsetzt. Schließlich verteilt der Raum gleichmäßig Elemente, bei denen der Abstand zwischen zwei beliebigen benachbarten Elementen und dem Raum vor dem ersten und nach dem letzten Element gleich ist.

Elemente ausrichten

Die Optionen fürdie Ausrichtung der Elemente(die CSS-Eigenschaft aus Align-Items) in den FlexBox-Einstellungen von Divi 5 steuern, wie Flexelemente entlang der Kreuzachse des Flex-Containers ausgerichtet sind. Diese Option unterscheidet sich von Justify -Inhalten, die Elemente entlang der Hauptachse ausrichten.

Wenn Siedie Layout-Richtungaufeine ReiheoderZeileeinstellen, wird die Kreuzachse vertikal. Auf diese Weise könnenElementedie vertikale Ausrichtung von Elementen innerhalb einer Reihe steuern. Wenn Siedie Layout-Richtungaufdie Spalten-oderSpalten-Rückkehreinstellen, ist die Kreuzachse horizontal. Ausgerichtungselemente steuern daher die horizontale Ausrichtung der Elemente in der Spalte.

Es gibt vier Hauptoptionen, darunter Start, die Elemente auf den Anfang, die Mitte, das Ende und die Dehnung ausrichten, die die Gegenstände dehnt, um den vollständigen Platz entlang der Kreuzachse des Containers zu füllen. Ein Element mit einer bestimmten Höhe oder einer bestimmten Breite überschreibt die Dehnung.

Layout -Verpackung

In den Flexbox-Einstellungen von Divi 5 bestimmt das Layout-Verpackung (Flex-Wrap-CSS-Eigenschaft), was passiert, wenn die Flex-Elemente in einem Flex-Behälter nicht mehr auf die nächste Linie ablaufen, wenn der Platz eng wird. Es gibt drei Optionen in Divi 5, darunter kein Wrap, Wrap und Wrap Reverse.

Kein Wrap ist die Standardeinstellung, mit der der Flex -Container versucht, alle Flexelemente in eine einzelne Zeile oder Spalte zu passen, unabhängig vom verfügbaren Speicherplatz. Wenn die Gegenstände zu breit sind, um zu passen, überfließen sie den Behälter (erstrecken sich über Grenzen hinaus) oder schrumpfen sie, um sie zu passen. Mit Wrap können Elemente auf eine neue Linie oder eine neue Spalte einwickeln, wenn sie den zugewiesenen Speicherplatz in der Reihe überschreiten. Wrap Reverse funktioniert ähnlich wie ein Wickel, aber sie tun dies in der entgegengesetzten Richtung, wenn es in die nächste Zeile einschließt.

Flexsteuerungen auf Modulebene

Divi 5 bietet nicht nur Flexbox -Steuerelemente in Abschnitt, Zeile und Spalten auf die Spaltenebene. Wenn Sie beispielsweise ein Gruppenmodul verwenden, können Sie den Abstand (Lücke), Layout -Richtung und alle anderen Flexbox -Einstellungen von Divi 5 einstellen.

Vorteile von Flexbox

Flexbox in Divi 5 ist nicht nur ein technisches Upgrade. Es bietet eine bessere Möglichkeit, moderne, reaktionsschnelle Websites leichter und effizienter aufzubauen. Durch die Integration von Flexbox in den visuellen Bauunternehmer ermöglicht DIVI 5 Benutzern aller Fähigkeiten, die Leistung von CSS zu nutzen, ohne Code zu schreiben. Hier sind einige Gründe, warum Flexbox ein so beeindruckendes Upgrade von Divi 4 ist:

Intuitive No-Code-Layout-Steuerung

Divi 5 integriert die Flexbox -Einstellungen direkt in den visuellen Bauunternehmer und können Sie die Ausrichtung, den Abstand und die Bestellung mit einfachen Optionen anpassen. Egal, ob Sie die gleichen Spaltenhöhen erstellen oder vertikal in den Zentrieren von Inhalten zentrieren, Flexbox erleichtert komplexe Layouts.

Besseres reaktionsschnelles Design

Das Flexbox -Layout -System von Divi 5 macht reaktionsschnell ein Kinderspiel, dank der anpassbaren Layout -Steuerelemente für Desktops, Tablets und Smartphones. Mit der Option "Change Column Structure" von Divi können Sie die Anzahl der Spalten auf Tablets und Smartphones ändern, während die Spaltenstruktur des Layouts auf Desktops intakt bleibt.

Flexbox + verschachtelte Zeilen

Durch die Kombination verschachtelter Zeilen und Flexbox in Divi 5 können Sie problemlos komplizierte, mehrstufige Layouts erstellen. Sie können beispielsweise eine Zeile mit Spalten erstellen, die eine eigene Zeile enthalten, um ausgefeilte Designs wie Gitter oder geschichtete Inhaltsabschnitte zu ermöglichen.

Flexbox + Modulgruppen

Modulgruppen in Divi 5 fungieren als Flexbehälter und ermöglichen es Ihnen, Gruppenmodule als zusammenhängende Einheit zu stylen und zu positionieren. Dies erleichtert es einfach, dynamische Abschnitte wie Funktionsboxen oder Testimonialkarten zu erstellen, die sich automatisch an Inhaltsänderungen anpassen und gleichzeitig einen konsistenten Abstand und Ausrichtung beibehalten.

Verbesserte Leistung und Einfachheit

Durch den Austausch von Divi 4-Abschnitten von Divi 4 durch die Spezial- und Fullwidth-Abschnitte durch ein einheitliches Flexbox-basiertes System wird Divi 5 den Entwurfsprozess optimiert, die Komplexität verringert und die Leistung verbessert. Dies bedeutet schnellere Ladezeiten und eine reibungslosere Bearbeitungserfahrung, insbesondere für große oder inhaltshörige Websites.

Vorgebaute Flexbox -Vorlagen für Schnellstarts

Divi 5 führt neue Zeilenvorlagen ein, die Flexbox nutzen, um vordefinierte, flexible Layouts wie gleiche Spalten, Offset-Säulen, Multi-Reis-Gitter und Mehrspalznetze bereitzustellen. Diese Vorlagen inspirieren Kreativität und können mit vollständig anpassbaren Strukturen über Flexbox -Einstellungen mit vollständig anpassbaren Strukturen springen.

Zukunftssicherer Design-Workflow

Während sich Divi 5 in seiner öffentlichen Alpha -Phase weiterentwickelt, positioniert sich das Flexbox -Layout -System Divi -Benutzer an der Spitze des modernen Webdesigns. Indem Sie jetzt Flexbox mastieren, richten Sie sich mit den Fähigkeiten aus, die den Branchenstandards entsprechen und sicherstellen, dass Ihre Websites an zukünftige Updates anpassbar bleiben.

Schalte kreatives Potenzial mit Flexbox in Divi 5 frei

Flexbox in Divi 5 ändert die Art und Weise, wie Benutzer reaktionsschnelle, dynamische Layouts erstellen. Mit Divi 5 können Benutzer atemberaubende, moderne Websites erstellen, ohne Code zu schreiben, indem sie leistungsstarke CSS -Flexbox -Eigenschaften nahtlos in den visuellen Builder integrieren. Von intuitiven Ausrichtung und Abstandskontrollen bis hin zu erweiterten Funktionen wie verschachtelten Zeilen und Modulgruppen vereinfacht das Flexbox -Layout -System komplexe Designs und stellt perfekt reaktionsschnelle Layouts sicher, die auf allen Geräten hervorragend aussehen.