Was ist Flexbox (und warum Sie es verwenden sollten)

Sie können den ganzen Tag über saubere Abschnitte erstellen. Das Ausrichten von Elementen über jede Bildschirmgröße kann sich jedoch eher wie Versuch und Irrtum als als absichtliches Design anfühlen.

Flexbox repariert das. Es gibt Ihnen eine echte Kontrolle darüber, wie Elemente in einen Behälter sitzen, strecken, schrumpfen und einwickeln, ohne dass die Ränder und Polsterung konstant eingestellt werden. In diesem Handbuch werden wir aufschlüsseln, wie Flexbox funktioniert, wie es Layouts vereinfacht und wie man es in der Divi 5 visuell verwendet, ohne eine einzelne Codezeile zu schreiben.

Was ist Flexbox

Flexbox, kurz für Flexible Box -Layout , ist ein Layoutmodell, mit dem sich die Elemente in einem Container ausrichten und lag. Anstatt jedes Element manuell mit Rändern oder festen Breiten zu positionieren, können Sie definieren, wie sich diese Elemente je nach verfügbarem Speicherplatz verhalten sollten.

Sollten Elemente wachsen, um zusätzlichen Raum zu füllen? Schrumpfen, wenn der Platz eng ist? Sollten sie in die nächste Zeile wickeln, wenn sie nicht mehr passen? Sie treffen diese Entscheidungen über eine Reihe von Eigenschaften, die Sie auf den Container und seine Kinder anwenden. So entscheiden Sie, wie Ihr Layout reagieren soll.

Nehmen wir praktische Beispiele, um dies zu verstehen. Angenommen, Sie haben drei Tasten in einer horizontalen Reihe. Mit Flexbox können Sie alle gleichmäßig im Behälter zentrieren:

Entscheiden Sie, dass der mittlere Knopf mehr Platz einnehmen sollte als die anderen:

Oder Sie möchten, dass die Schaltflächen automatisch stapeln, wenn der Bildschirm schmaler wird:

Flexbox ermöglicht dies all dies mit einfachen Eigenschaften wie Justify-Incontent, Flex-Wrap und Flex-Grew.

Darüber hinaus können Sie steuern, wie Elemente verteilt sind, auf verschiedenen Achsen ausgerichtet und visuell bestellt werden, ohne ihre tatsächliche Position im Bauunternehmer zu ändern. Sie können den Inhalt zentrieren, nach oben oder unten im Container schieben, einen Element anders als der Rest ausrichten oder sogar die gesamte Reihenfolge über Haltepunkte umkehren.

Sie könnten denken: Kann ich das nicht schon mit Margen und Polsterung tun?

Sie haben Recht. Sie können Elemente manuell zentrieren oder ihre Größe mit benutzerdefinierten Breiten einstellen. Diese Methoden beruhen jedoch auf die Positionierung jedes Elements einzeln. Sie stellen jedes Element einzeln für jede Bildschirmgröße ein.

Flexbox verschiebt diesen Prozess vollständig. Anstatt jedes Element separat zu behandeln, können Sie die Layoutregeln auf der Containerebene einmal definieren. Sie sagen dem Container, wie sich seine Kinder in verschiedenen Szenarien verhalten sollten, und es passt sie bei Bedarf an.

Dieser Ansatz macht Layouts konsistenter, einfacher zu verwalten und flexibler, wenn sich Designs entwickeln, insbesondere wenn sich die Bildschirmgrößen ändern oder neue Module hinzugefügt werden.

Wie sich die Ausrichtung der Flexe auf die Ausrichtung auswirkt

Eine der ersten Möglichkeiten, die Sie in Flexbox treffen, ist die Richtung, in die die Elemente fließen sollten, sei es in einer Zeile oder in einer Spalte. Die Eigenschaft Flex-Regisseur legt dies fest und definiert, wie Elemente sich im Container ausrichten, umwickeln und lag.

Lassen Sie uns dies besser verstehen, da gemeinsame Eigenschaften wie Rechtfertigungsbekämpfung und Ausrichtung in der Intensivierung vollständig davon abhängen, in welcher Richtung eingestellt ist. Sie funktionieren nicht das Standardlayout des Browsers, aber die von Flexbox erstellten Äxte: die Hauptachse und die Kreuzachse . Die Hauptachse folgt der Richtung, die Sie mit Flex-Richtung eingestellt haben: Horizontal für Zeilen, vertikal für Säulen. Die Kreuzachse geht in die andere Richtung: vertikal für Zeilen, horizontal für Säulen.

Die Hauptachse läuft also von links nach rechts, wenn die Richtung auf die Reihe eingestellt ist. Das bedeutet, dass Justify-Incontent Elemente in der Zeile bewegt und ausgerichtet ist-es steuert, wie sie vertikal innerhalb dieser Zeile ausgerichtet sind.

Und wenn Sie die Richtung in die Spalte wechseln, flippt die gesamte Ausrichtungslogik. Die Hauptachse verläuft jetzt von oben nach unten, was bedeutet, dass die Justify-Content-Elemente die Elemente vertikal ausrichten und die Ausrichtung der Position von links nach rechts anpasst.

Es kann sich zunächst leicht verwirrend anfühlen, aber sobald Sie sehen, wie die Haupt- und Kreuzachsen auf die Richtung reagieren, klickt es. Sie werden anfangen, Muster zu erkennen, und Layoutentscheidungen fühlen sich intuitiver an. Es gibt auch eine kurze Referenztabelle unten, wenn Sie beim Üben die Dinge überprüfen möchten.

Syntax- und gemeinsame Flexbox -Eigenschaften

Schalten Sie die Anzeigeeigenschaft eines Containers von Block zu Flex, um die Flexbox zu aktivieren. In diesem Fall beginnt der Browser mit der Behandlung von inneren Elementen wie Zeilen, Tasten, Karten oder Symbolen als Flex -Elemente.

.container {
display: flex;
}

Von dort aus verwenden Sie verschiedene Flexbox -Eigenschaften, um das Verhalten zu steuern. Zum Beispiel entscheidet Justify-Content, wie Elemente entlang der Hauptachse verteilt sind (diese wird standardmäßig auf horizontal eingestellt, Flex-Richtung: Zeile) . Verwenden Sie den Flex-Start, um die Gegenstände links auszurichten, das Flex zu beenden, um sie nach rechts zu drücken, zentrieren Sie sie, um sie zu zentrieren, oder im Raum zwischen und räumlich, um sie gleichmäßig auszubreiten.

Standardmäßig versucht Flexbox, alle Elemente in eine Zeile anzupassen. Wenn es zu viele gibt, schrumpfen sie auf der Grundlage ihrer Flex-Shrink-Einstellungen, und wenn sie nicht genug schrumpfen können, können sie den Behälter überlaufen. Um dies zu verhindern, schalten Sie Flex-Wrap ein, damit die Elemente auf eine neue Linie gehen, anstatt in eine zu packen.

Sie können sich bereits viele Anwendungsfälle vorstellen, in denen diese beiden Eigenschaften Layoutprobleme lösen können. Aber es gibt noch viel mehr und jeder gibt Ihnen eine spezifische Kontrolle über Größe, Ordnung, Ausrichtung und Abstand.

Wenn Sie neugierig sind, wie diese tatsächlich auf spielerische Weise funktionieren, probieren Sie Flexbox Froggy aus. Es ist ein lustiges kleines Spiel, bei dem Sie echte Flexbox -Code anwenden, um Frösche um einen Teich zu verschieben. Unterwegs hören Sie auf, zu erraten und genau zu erkennen, was jede Eigenschaft tut.

Warum Flexbox verwenden?

Inzwischen haben Sie gesehen, wie Flexbox die Art und Weise verändert, wie Layouts auf den Raum reagieren. Aber der wahre Wert kommt von dem, was diese Verschiebung ermöglicht, leichter zu tun. Flexbox verwandelt hartnäckige Layout -Herausforderungen in einfache, wiederverwendbare Muster.

• Vereinfachte Ausrichtung: Eigenschaften wie Justify-Incontent- und Ausrichtungs-Items-Zentrum oder Raumelemente, ohne sich auf Rand-Optimierungen oder Helferklassen zu verlassen.
• Standardmäßig reaktionsschnell: Elemente wachsen natürlich wachsen, schrumpfen oder wickeln abhängig von ihrem Raum. Dies führt zu saubereren Layouts, die sich ohne zusätzliche Haltepunkte anpassen.
• Automatischer Abstand und Größen Sie: Sie steuern, wie Elemente Platz mit Eigenschaften wie Flex-Anfänger, Flex-Shrink und Flex-Base teilen, wodurch das Layout flüssig statt repariert wird.
• Neu ordnen, ohne HTML zu ändern: Sie können die visuelle Reihenfolge der Elemente ändern, ohne die HTML zu berühren. Die Struktur bleibt sauber, während sich das Layout an verschiedene Bildschirme anpasst.
• Weniger Layout-Hacks: Sie benötigen keine Schwimmer, ClearFixes oder Height-Matching-Skripte mehr. Flexbox ersetzt diejenigen mit modernen, zuverlässigen Optionen.

Und weil es in allen großen Browsern unterstützt wird, ist Flexbox nicht nur effizient, sondern auch zuverlässig. Dies macht es zu einer modernen, zuverlässigeren Wahl für reale Projekte.

Warum Flexbox oft besser ist als Netz

Grid ist ein weiteres beliebtes Layout -System wie Flexbox. Beide sind jedoch für verschiedene Anwendungsfälle gebaut.

Das Grid ist beispielsweise für zweidimensionale Layouts ausgelegt, bei denen Sie die Kontrolle über Zeilen und Spalten benötigen. Produktausstellungen, Bildgalerien und redaktionelle Layouts im Magazinstil sind Grid-Beispiele, da sie sich auf beide Achsen auf eine eng ausgerichtete Struktur verlassen.

Sie beginnen zunächst das Netz: Wie viele Zeilen und Säulen gibt es und wie breit oder groß jeder sein sollte. Dann legen Sie jeden Element in diese Struktur.

Dies ist ein Netzlayout. Die Elemente sind auf beiden Achsen ausgerichtet: Zeilen und Spalten mit festem Abstand und Proportionen.

Aber nicht jedes Layout braucht dieses Planungsniveau.

Meistens fließen UI -Abschnitte in eine einzelne Richtung. Kartenzeilen, Icon-Plus-Text-Blöcke und Navigationsverbindungen folgen einer Achse, nicht zwei. Genau hier passt Flexbox.

In einem Flexbox -Layout sind Karten in eine Richtung (Zeile oder Spalte) ausgerichtet und dann auf der Grundlage der Containerregeln eingewickelt und verteilt.

Sie müssen das gesamte Layout nicht im Voraus abbilden. Sie sagen einfach dem Container, wie sich Elemente entlang einer einzelnen Achse verhalten sollten, und Flexbox verarbeitet ihn.

Wenn Sie also etwas entwerfen, das wirklich von einem starren Raster abhängt, ist Flexbox oft die schnellere, einfachere und flexiblere Wahl.

Flexbox in Divi 5

Alles, was wir bisher über Flexbox gelernt haben, ist großartig, aber das Schreiben von benutzerdefiniertem CSS für jedes Layout -Optimeter ist nicht das, was Sie tun möchten, besonders wenn Sie Ihre Website mit einem visuellen Bauunternehmer wie Divi erstellt haben.

Deshalb enthält Divi 5 jetzt integrierte Flexbox-Steuerelemente. Sie müssen die Registerkarten nicht mehr wechseln oder CSS manuell hinzufügen. All dies und sogar fortgeschrittenes Layoutverhalten ist jetzt in den visuellen Bauunternehmer, abzüglich der Kodierung und eines überwältigenden Backends integriert.

Abonnieren Sie unseren YouTube -Kanal

Kurz gesagt, Kurzgeschichte, ich muss mich nicht an Syntax- oder Eigenschaftsnamen erinnern. Klicken Sie auf einen Abschnitt, eine Zeile oder eine Spalte, gehen Sie zur Registerkarte "Entwurf" und "Layout> Layout -Stil " verwenden Sie sicher, dass Sie Flex verwenden.

Dies eröffnet einen neuen Satz von Layout -Steuerelementen. Dies sind die Core Flexbox -Eigenschaften, die Sie normalerweise in CSS schreiben würden, jetzt jedoch als klickbare Optionen. Sie können Änderungen live testen und sehen, wie Ihr Inhalt reagiert.

Selbst wenn Sie noch nie eine einzige Zeile von Flexbox -Code geschrieben haben, werden Sie nichts verpassen. Divi 5 gibt Ihnen die gleiche Layout -Steuerung visuell mit dem gleichen Kontrollniveau, aber viel leichter.

Erfahren Sie alles über das Flexbox -System von Divi 5

Neue Reihenstrukturen

Warum Divi, wenn andere Webbauer es auch haben? Während viele Webbauer Flexbox als Layoutoption anbieten, nähert sich Divi 5 anders. Dies ist keine Funktion, die auf einem vorhandenen System überlagert ist. Es ist jetzt der Kern der Funktionsweise des Baumeisters.

Der gesamte Layout -Motor wurde mit Flexbox von Grund auf neu aufgebaut. Infolgedessen fühlt sich das Layoutverhalten konsistenter und vorhersehbarer an, da es einer absichtlich gestalteten Layoutlogik folgt.

Wenn Sie beispielsweise einen neuen Abschnitt oder eine Reihe in Divi 5 hinzufügen, werden Sie sofort etwas anderes bemerken. Neue Strukturen. Jedes läuft jetzt standardmäßig auf Flexbox, was bedeutet, dass Ausrichtung, Abstand und Reaktionsfähigkeit von Anfang an intelligenter behandelt werden.

Sie müssen Flex nicht für neue Designelemente einschalten, die Sie hinzufügen. Und wenn Sie dies tun, können die Ausrichtung und Abstandswerkzeuge beim Bearbeiten eines älteren Layouts sofort einfacher zu verwalten.

Sie können auch ändern, wie Spalten in einer Zeile unter Verwendung der Änderungsspaltenstruktur angeordnet sind.

Dadurch wird ein Panel geöffnet, in dem Sie eine neue Spaltenstruktur auswählen können. Die Layout -Updates sofort, wobei Flexbox den Abstand und die Ausrichtung automatisch anpasst.

Fügen Sie ein paar verschiedene Zeilentypen hinzu und ändern Sie den Bildschirm. Sie werden sehen, wie sich alles verändert und sich anpasst, ohne zusammenzubrechen. Das ist die Stärke der in den Bauherrn eingebackenen Flexbox, die Divi 5 zu einer zuverlässigeren und modernen Option macht.

Wie Flexbox in Divi 5 funktioniert

Wenn Sie anfangen, finden Sie hier eine kurze Vorgehensweise, mit der Sie sich bei der Verwendung von Flexbox in Divi 5 zuversichtlich fühlen können.

Layoutkontrollen

Wenn Sie einen Abschnitt, eine Zeile oder eine Spalte in Flex -Layout wechseln, wird in den Layouteinstellungen von Design> Layout ein neuer Satz von Layout -Steuerungen angezeigt. Diese bieten Ihnen eine visuelle Flexbox -Steuerung neben Ihren üblichen Optionen.

• (1) Layoutstil: Hier aktivieren Sie Flex. Sobald Sie eingestellt sind, werden andere flexspezifische Optionen wie Richtung, Ausrichtung und Abstand sichtbar.
• (2) Horizontaler Lücke: Fügt Platz zwischen den Elementen von links nach rechts hinzu.
• (3) Vertikale Lücke: Legt den Speicherplatz zwischen gestapelten Elementen bei der Verwendung von Spaltenlayouts fest.
• ,
• (5) Inhalt rechtfertigen: Richten Sie Elemente entlang der Hauptachse aus. Sie können sie zentrieren, zur Seite schieben oder ausbreiten.
• (6) Ausrichten von Elementen: Ausrichten von Elementen entlang der Kreuzachse, was hilfreich ist, wenn sie die Elemente vertikal innerhalb einer horizontalen Reihe anordnen.
• (7) Layout -Verpackung: Dadurch können die Elemente in die nächste Zeile wechseln, wenn der Speicherplatz abgelaufen ist. Hilfreich beim Erstellen von Layouts, die auf die Bildschirmgröße reagieren, anstatt zu brechen.

Angenommen, Sie haben eine Markenleiste mit Logos und möchten, dass sie größer sind. Wenn die Flex -Richtung auf Reihen und Layout eingestellt ist, werden sie automatisch in zwei Zeilen fließen, wenn kein Platz vorhanden ist.

Das Ausrichten von Elementen in zwei Zeilen ist jetzt ohne Medienfragen oder eine manuelle Problemumgehung einfach.

Spaltensteuerung und -größe

Sobald sie in einer flex-fähigen Zeile sind, verfügt jede Spalte über eine neue Einstellung unter Design> Größen Sie als Spaltenklasse . Dies bestimmt, wie viel Platz eine Spalte basierend auf ihrem Inhalt und ihrer Umgebung einnimmt.

Sie können zwischen Schrumpfen zum Anpassen auswählen (wodurch die Säule nur so breit ist wie der Inhalt) oder wachsen, um zu füllen (wodurch die Säule zusätzlichen Platz einnimmt).

Wenn Sie beispielsweise möchten, dass sich eine Textspalte prominenter anfühlt und Kartenelemente hat, die ihren Inhalt umarmen, würden Sie die Karten so einstellen, dass sie passen und den Text zum Füllen anwachsen.

Bestellsteuerungen

Ein weiteres leistungsstarkes, aber oft übersehenes Tool ist die Auftragseinstellung auf der Registerkarte Inhalt . Auf diese Weise können Sie Spalten und Module visuell neu ordnen, ohne die Layoutstruktur in Drahtmodell oder Ebenenansicht zu ändern.

Sagen Sie, Sie möchten, dass ein bestimmtes Modul zuerst auf Mobilgeräten, aber zweitens auf dem Desktop angezeigt wird. Sie können an jedem Haltepunkt verschiedene Bestellwerte zuweisen.

Praktische Anwendungsfälle von Flexbox

Schauen wir uns einige weitere Flexbox -Anwendungsfälle an, die jetzt mit Divi 5 vereinfacht werden.

1. Die vertikal ausrichten Sie alles mit Flex

Die vertikale Ausrichtung war lange Zeit eines der nervigsten Layoutprobleme des Webdesigns. Sie würden versuchen, Padding -Tricks, absolute Positionierung, manuelle Ränder und so weiter zu tun, nur um etwas zu haben, das auf Desktops gut aussah, aber auf kleineren Bildschirmen kaputt war.

Mit Divi 5 ist dieser Kopfschmerz weg. Wenn Sie den Inhalt in einem Abschnitt vertikal konzentrieren möchten, setzen Sie nur die Ausrichtungselemente in die Mitte ein.

Das war's. Das Layout passt automatisch an Haltepunkten an, und Ihr Inhalt bleibt immer am Sweet Spot. Was früher die CSS -Gymnastik genommen hat, ist jetzt nur ein paar Klicks im Bauunternehmer.

2. Die Kartenhöhen automatisch ausgleichen

Sie sind wahrscheinlich schon einmal auf dieses Problem gestoßen. Sie erstellen eine Reihe von Karten, z. B. einen Klappentext, und alles sieht gut aus, bis ein Element mehr Text als die anderen hat. Plötzlich fühlt sich Ihr Layout uneben an. Einige Säulen dehnen sich größer, andere bleiben kurz und das Design verliert das Gleichgewicht.

Diese manuelle Reinigung wird nicht mehr benötigt. Wenn Sie eine Zeile oder einen Abschnitt in Blex umstellen, wendet Divi Standardeinstellungen an, mit denen jede Spalte als Flexelement behandelt wird. Dadurch dehnen sie sich automatisch, um die Höhe des anderen in derselben Zeile zu entsprechen, unabhängig vom Inhalt im Inhalt.

Es bleibt auch reaktionsschnell. Auf kleineren Bildschirmen wickeln die Spalten in neue Zeilen ein, ohne zusätzliche Anpassungen zu benötigen, und das Verhalten der gleichen Höhen gilt weiterhin.

3.. Wickeln automatisch über Haltepunkte hinweg umwickeln

Eine Reihe von Schaltflächen über verschiedene Bildschirmgrößen zu halten, kann Schmerzen sein. Normalerweise fügen Sie neue Zeilen hinzu oder passen das Layout für jeden Haltepunkt manuell an. Aber mit Divi 5 ist das nicht mehr notwendig.

Schalten Sie das Flex -Layout ein und aktivieren Sie das Layout -Verpackung in der Laptop -Ansicht. Das war's. Die Tasten werden automatisch in mehrere Zeilen auf kleineren Bildschirmen eingewickelt, ohne das Layout zu brechen.

Die Tasten halten ihren Abstand und ihre Ausrichtung auf größeren Bildschirmen und Stapel auf natürliche Weise auf Tablets und Telefonen. Sie können ihre Ausrichtung sogar mit Justify-Incontent und dem steuernden Abstand zwischen ihnen mit Lücken fein abstellen, sodass alles in jeder Größe sauber und beabsichtigt aussieht.

Divi + Flexbox macht einfach Sinn

Sie haben gesehen, wie Flexbox funktioniert, wie Divi 5 es visuell macht und wie häufig Layout -Kopfschmerzen statt Stunden Sekunden dauern. Divi 5 unterstützt nicht nur Flexbox - es basiert darum. Jeder Abschnitt, jede Reihe und jeder Spalte ist bereit zu verhalten, wie Sie es ohne benutzerdefinierte CSS erwarten würden.

Flexbox ist nicht nur eine Option, wenn Sie mit Divi 5 entwerfen. Es ist die intelligentere Standardeinstellung. Reinigere Layouts, weniger Problemumgehungen und reaktionsschnelle Kontrolle, die direkt in den Baumeister eingebacken sind. Das ist die Verschiebung, und das ist etwas, das Sie auf die Zukunft des Webdesigns vorbereitet.