Eine Anfängerhandbuch für Flexbox CSS -Eigenschaften

Gutes Layout beginnt mit einem klaren Modell für Ausrichtung und Abstand. Flexbox bietet dieses Modell, indem Inhalte entlang einer einzelnen Achse mit vorhersehbarer Steuerung über Richtung, Ausrichtung, Verpackung und Lücke organisiert werden.

Dieser Beitrag deckt die Grundlagen dieser CSS -Eigenschaften und deren Zusammenarbeit ab. Nach den Grundlagen zeigen wir, wie der gleiche Ansatz in Divi 5 mit dem FlexBox -Layout -System visuell implementiert wird. Kommen wir dazu!

Was ist CSS Flexbox?

Mobiler Verkehr überholt Desktop verändert das Webdesign. Entwickler benötigten Layouts, die auf Telefonen, Tablets und Desktops funktionieren. Alte Methoden scheiterten oft.

Flexbox hat dies behoben. CSS Flexbox lässt Elemente anpassen. Anzeige hinzufügen: Flex zu einem Behälter und seine direkten Kinder werden flexibel. Sie können basierend auf dem Raum wachsen, schrumpfen oder festhalten.

Flexbox legt Elemente in einer geraden Linie, entweder Zeilen von links nach rechts oder Spalten von oben nach unten. Sie wählen die Richtung.

Der Container steuert das Layout. Sie setzen, wie Elemente ausgerichtet und ausgerichtet sind, z. B. gleichmäßig, zentriert oder gestapelt. Die Gap -Eigenschaft fügt einen konsistenten Platz zwischen Gegenständen ohne zusätzliche Margen oder Polsterung hinzu. Ältere Techniken erforderten schwierige Randmathematik und brachen häufig aus.

Die herkömmliche Methode trifft zufällige Abstandentscheidungen: 10px hier, 20px dort, 40px woanders. Diese verstreuten Werte verursachen Inkonsistenzen und machen es schwierig zu wissen, welcher Abstand gilt. GAP -Eigenschaften entfernen Vermutungen, indem eine konsistente Regel für alle Elemente verwendet wird.

Eine kurze Anleitung zu Flexbox und seinen Eigenschaften

Flexbox teilt sich in zwei Camps ein: Eigenschaften für Behälter und Eigenschaften für Elemente. Containereigenschaften wirken sich auf die gesamte Gruppe aus, während Sie mit Elementeigenschaften einzelne Elemente optimieren können. Die meisten Layouts brauchen nur eine Handvoll dieser Eigenschaften, wie zum Beispiel:

Anzeige: Flex

Verwandeln Sie jedes Element in einen Flex -Behälter, indem Sie Anzeige hinzufügen: Flex. Seine direkten Kinder werden zu Flexartikeln. Die Elemente stehen standardmäßig in einer Zeile an, anstatt wie Standard -Blockelemente zu stapeln. Ihre Abstandskopfschmerzen verschwinden, da Flexgegenstände unterschiedliche Regeln als normale Elemente befolgen. Der Container kontrolliert nun, wie sich seine Kinder (oder Gegenstände) verhalten, und Sie erhalten vorhersehbare Ergebnisse anstelle der üblichen CSS -Überraschungen.

Flex-Richtung

Wählen Sie die Richtungsgegenstände aus. Verwenden Sie eine Zeile für die Anordnung von links nach rechts.

und eine Spalte, um Elemente vertikal zu stapeln.

Fügen Sie den beiden zu einem umgekehrt hinzu, und die Elemente drehen ihre Bestellung vollständig um.

Diese Auswahl legt Ihre zentrale Achse fest, die sich auswirkt, wie andere Eigenschaften funktionieren.

Wenn Sie von der Zeile zur Spalte wechseln, ändert sich die Verhalten von Rechtfertigungsbekämpfung und Ausrichtung, sodass die Richtung in Ihrer Planung an erster Stelle steht.

Rechtfertigungsbekämpfung

Diese Eigenschaft verteilt den übrig gebliebenen Raum entlang Ihrer zentralen Achse. Gegenstände nehmen das, was sie brauchen, und dann übernimmt diese Eigenschaft den Rest. Verwenden Sie Flex-Start, um zu Beginn alles zu bitten, zentrieren Sie die Elemente in der Mitte und das Flex-Ende, um alles gegen Ende zu setzen. Gleichzeitig wird das Weltraum zwischen den Gegenständen mit gleichen Lücken ausgebreitet. Der Raum-Around-Wert verleiht jedem Element den gleichen Raum auf beiden Seiten, während Platzfläche überall identische Lücken schafft.

Ausrichtung

Es kümmert sich um die Ausrichtung auf der Kreuzachse. Für horizontale Layouts bedeutet dies vertikale Ausrichtung. Für vertikale Layouts steuert es die horizontale Positionierung. Es unterstützt Werte wie Flex-Start, Mitte, Flex-End, Stretch und Baseline (nicht die Space-* -Werte). Stellen Sie es in die Mitte ein und die Gegenstände richten sich unabhängig von ihren Höhen an die Mitte. Der Standardwert ist Stretch: Elemente Dehnen, um die Kreuzgröße des Behälters zu füllen. Wenn die Kreuzgröße des Behälters automatisch ist, ist es häufig dem höchsten Element, sodass Elemente gleich hoch erscheinen.

Flex-Wrap

Entscheidet, was passiert, wenn Gegenstände keinen Raum mehr haben. Der Standard -Nowrap hält alles in einer Zeile, indem sie Elemente schrumpfen. Wechseln Sie zu Wrap und Elementen, die nicht passen, fielen auf neue Leitungen, während die bevorzugten Größen beibehalten werden. Sie können auch die Wickelrichtung umkehren. Das Wickeln verwandelt Ihre einzelne Linie in mehrere Zeilen und erstellt Layouts, die Gittern ähneln.

Lücke

Es fügt Platz zwischen Gegenständen hinzu, ohne mit Rändern zu spielen. Setzen Sie Lücke: 20px, und jedes Element erhält einen konsistenten Abstand. Sie können bei Bedarf unterschiedliche horizontale und vertikale Lücken festlegen. Der Raum erscheint nur zwischen Elementen, nicht an den Rändern. Dies schlägt die Berechnung von Rändern, die brechen, wenn Sie die Layouts später ändern.

Diese Eigenschaften funktionieren gut, sobald Sie den Dreh raus haben. Der knifflige Teil ist es, sich zu erinnern, was jeder tut, und das gesamte CSS abgibt. Sie schreiben Code, aktualisieren Ihren Browser, sehen Sie, er ist nicht ganz richtig, dann gehen Sie zurück und passen Sie sie an. Visuelle Bauherren wie Divi drehen dies herum, indem Sie Sie auf Schaltflächen klicken, anstatt Eigenschaftsnamen zu tippen.

Divi 5 macht Flexbox visuell

Wie wir uns etabliert haben, ist das Lernen von Flexbox eine Sache; Erinnern Sie sich an das, was für Rechtfertigungen: Raumgefühle dazwischen ist, ein weiterer. Sie verbringen mehr Zeit damit, Immobilien als zu entwerfen. Anstatt CSS zu schreiben, verwenden Sie Schaltflächen und Schieberegler, die genau zeigen, was jede Option im Divi -Builder tut. Divi 5 bringt dies zu Flexbox und verwandelt abstrakte Konzepte in einfache, klickbare Steuerelemente.

Bevor wir tiefer tauchen, schauen wir uns kurz an, was Divi ist.

Was ist Divi?

Divi ist ein Website-Bauunternehmer, der WordPress für Menschen arbeitet, die gut aussehende Websites ohne Ärger haben möchten.

Sie können alle mehr als 200 Module um Ihre Seite ziehen und den Text, in dem er sich befindet, ändern. Wählen Sie Farben aus und beobachten Sie, wie sie sofort erscheint, während Sie auf der realen Website arbeiten, nicht auf eine Vorschau, die Sie später anlügen könnte.

Das Thema umfasst mehr als 2000 Layouts für Restaurants, Fotografen, Berater und andere Unternehmen, sodass Sie einen finden, den Sie mögen, und es optimieren, bis es perfekt für Ihre Bedürfnisse funktioniert.

Der Themenbauer gibt Ihnen die Kontrolle über jeden Teil Ihrer Website. Sie können Header entwerfen, die hervorstechen, anstatt wie alle anderen auszusehen, Blogseiten zu erstellen, die die Leute lesen möchten, und sogar Ihre 404 Seiten so interessant genug machen, dass Besucher in der Nähe bleiben, anstatt zu gehen.

Divi AI hilft Ihnen beim schnellen Aufbau

Einmal bedeutete das Machen von Themen und Vorlagen, verschiedene Apps für Kopien, Bilder und Designideen zu jonglieren. Divi AI versammelt alles, was Sie brauchen, in eine einheitliche Oberfläche: Genau dort, wo Sie Ihre Websites erstellen.

Sagen Sie es, dass Sie Text brauchen, und es schreibt es.

Fragen Sie nach benutzerdefinierten Bildern, und es schafft sie. Sie können sogar Foto -Änderungen beschreiben und beobachten, wie sich die Änderungen vornehmen.

Außerdem behandelt es Code und erstellt neue Abschnitte, wenn Sie fragen.

Divi Quick -Websites rettet Sie davor, auf eine leere Seite zu starren, ohne zu wissen, wo Sie anfangen sollen. Sie können von den Starter -Sites, die unser Team entworfen hat, mit Originalbildern und Kunstwerken auswählen, die gut aussehen.

Sie können Ihr Unternehmen auch für Divi -Schnell -Websites beschreiben und mit KI etwas von Grund auf neu erstellen lassen. Diese KI-gebauten Websites sind mit echten Schlagzeilen, Kopien und Bildern ausgestattet, die Ihrer Beschreibung entsprechen.

Erstellen Sie alles mit KI, holen Sie sich Fotos von Unplash oder lassen Sie sich für Ihre Bilder in die Profiltierer fallen. Stellen Sie zuerst Ihre Schriftarten und Farben ein und lassen Sie die KI Ihre Markenentscheidungen bearbeiten, während Sie danach alles bearbeitet werden.

Divi 5: Der zukunftssichere Website Builder

Divi 5 baut den gesamten Rahmen von Grund auf um.

Der visuelle Builder läuft glatter, Seiten werden schneller und die Codebasis kann moderne Webstandards effektiver unterstützen. Sie erhalten saubereres Markup, eine bessere Leistung und eine Grundlage für die Gegenwart und Zukunft.

Die Schnittstelle wird ebenfalls optimiert. Die Einstellungen erscheinen logisch organisierter, und alltägliche Aufgaben erfordern weniger Klicks. Die Gesamterfahrung fühlt sich an, egal ob Sie einfache Seiten oder komplexe Layouts bauen.

Sie erhalten den gleichen visuellen Ansatz, den Sie kennen, nur mit einer viel stärkeren Grundlage darunter.

Was ist neu in Divi 5

Die neue Architektur öffnet Türen für Funktionen, die vorher nicht möglich waren. Diese 18+ Ergänzungen ändern die Art und Weise, wie Sie Websites erstellen und verwalten.

Hier ist ein Beispiel für das, was Sie bekommen:

• Flexbox -Layout -System: Visuelle Steuerelemente für Ausrichtung, Abstand und Positionierung. Elemente können automatisch wachsen, schrumpfen oder in neue Zeilen wickeln. Arbeitet mit verschachtelten Zeilen und Modulgruppen für komplexe Layouts ohne Code.
• Verschachtelte Zeilen: Zeilen in andere Reihen mit unendlicher Nistung legen. Erstellen Sie komplexe Layoutstrukturen ohne Code -Problemumgehungen.
• 17 WooCommerce -Module: Komplette Produktseitenbauer einschließlich Produktgalerie, Hinzufügen zum Warenkorb, Bewertungen, Bewertungen, Aktienbekanntmachungen, Brotkrumen, Produktmeta, Upsells und mehr. Cart- und Checkout -Module kommen in Kürze.
• Interaktionen System: Erstellen Sie Pop-ups, Umschaltungen, Bildlaufanimationen, Mausbewegungseffekte und Ansichtsfenster. Mischen Sie mehrere Auslöser für komplexe Verhaltensweisen wie Werbebanner, die nach dem Scrollen verblassen.
• Responsive Editor: Ermöglicht die gleichzeitigen Einstellung, ohne die Ansichtsmodi für schnellere, präzisere und weniger überfüllte Bearbeitung zu wechseln, anzeigen, bearbeiten und zurücksetzen.
• Loop Builder: Erstellen Sie dynamische Inhalte, die aus Ihrer Datenbank stammen. Erstellen Sie benutzerdefinierte Postlayouts, Produktgitter und Wiederholungsabschnitte. Arbeitet mit WooCommerce -Produkten.
• Option Gruppenvoreinstellungen: Erstellen Sie wiederverwendbare Stile für Typografie, Grenzen, Schatten und Hintergründe. Wenden Sie diese auf ein kompatible Element an, nicht nur einzelne Module.
• Designvariablen: Legen Sie globale Werte für Farben, Schriftarten, Abstand, Zahlen, Bilder und Text ein. Ändern Sie Ihre Primärfarbe einmal und sie wird überall automatisch aktualisiert.
• Erweiterte CSS -Einheiten: Verwenden Sie Clamp (), Calc (), Min () und max () über visuelle Steuerelemente. Kein Code für reaktionsschnelle Typografie- und Abstandsberechnungen.
• Relative Farben und HSL: Erstellen Sie mathematisch schöne Farbsysteme. Erstellen Sie Farbvariationen, die automatisch die Harmonie beibehalten, wenn die Grundfarbe geändert wird.

Und mehr kommt! Unser Entwicklungsteam fügt alle zwei Wochen weiter hinzu, da es sich auf die öffentliche Beta -Veröffentlichung vorbereitet.

Ein kurzer Überblick über das Flexbox -Setup von Divi 5

Der visuelle Ansatz von Divi 5 entfernt die Vermutung aus der Implementierung von Flexbox. Anstatt sich Eigenschaftsnamen auswendig zu lernen und CSS einzugeben, erhalten Sie Tasten und Schieberegler, die genau zeigen, was jede Steuerung tut. Schauen Sie sich an, wie einfach es ist.

1. Einrichten Ihrer ersten Flex -Reihe

Wählen Sie Ihre Zeilenstruktur aus der erweiterten Vorlageauswahl aus. Divi 5 bietet viele weitere Layoutoptionen, einschließlich gleicher Spalten, Multi-Reihen-Gitter und Multi-Säulen-Setups.

Neue Abschnitte in Divi 5 beginnen automatisch mit Flexbox. Wenn Sie eine frische Reihe hinzufügen, ist sie mit Flex -Eigenschaften eingeschaltet. Wenn Sie jedoch mit vorhandenen Abschnitten aus älteren Divi -Versionen arbeiten, müssen Sie sie manuell über das Standardblock -Layout auf Flex wechseln, indem Sie auf das Symbol für die Einstellungen in Ihrer Zeile klicken, zur Registerkarte "Design"> "Block" in "Flex" geändert werden.

2. Verständnis der Richtung, Fluss, Ausrichtung

Ihr Feld zur Layout -Richtung bestimmt, wo die Elemente enden. Zeile ist die Standardeinstellung, mit der die Elemente horizontal ausgerichtet sind.

Wechseln Sie in die Spalte, und Elemente stapeln Elemente vertikal wie reguläre Weblayouts.

Beide Optionen werden mit umgekehrten Versionen ausgestattet, die die Bestellung vollständig umdrehen.

In der Zwischenzeit entscheidet Justify Inhalt, was mit dem übrig gebliebenen Raum entlang Ihrer Hauptachse passiert. Für Zeilen bedeutet Start links, mittlere Zentren horizontal und enden nach rechts.

Für Säulen bedeutet Start oberes, mittleres Zentren alles und das Ende drückt Elemente nach unten.

Über die Standard -Start-, Mitte- und Endausrichtung hinaus haben Sie auch Platz zwischen Spreads -Gegenständen mit gleichen Lücken, perfekt für Navigationsmenüs oder Kartenlayouts.

Der Platz bietet jedem Gegenstand auf beiden Seiten gleichermaßen Raum, was nützlich ist, wenn Sie konsistente Ränder wünschen. Und der Raum schafft gleichmäßig überall identische Lücken, ideal für einen ausgewogenen visuellen Abstand.

Die Ausrichtung von Elementen funktioniert senkrecht zu Ihrer Strömungsrichtung. Wenn Sie das Zeilenlayout wählen, steuert dies die vertikale Positionierung von Elementen.

Wenn Sie das Säulenlayout ausgewählt haben, werden die horizontalen Ausrichtung behandelt.

Das Zentrum hält alles auf die Mitte ausgerichtet, die Startpositionen am Anfang, das Ende drückt sie an die lange Kante, und die Dehnung lässt die Gegenstände den verfügbaren Platz füllen.

Diese Kontrollen lösen gemeinsame Layout -Kopfschmerzen ohne benutzerdefinierte CSS -Berechnungen.

3..

Lückensteuerungen fügen Platz zwischen Flex -Elementen in Ihrem Container hinzu: Spalten, Module und jeder Inhaltstyp. Lücken erzeugen Atemraum ohne unordentliche Polsterung oder Randmathematik. Die Lücke erscheint nur zwischen Gegenständen, nicht an den Außenkanten.

Stellen Sie Ihre horizontale Lücke auf 20px ein, und jede Spalte hat genau diesen Abstand.

Ändern Sie die vertikale Lücke auf 20px, und alle Lücken werden sofort aktualisiert.

Divi 5 unterstützt fortschrittliche CSS -Einheiten wie Ansichtsfensterlängen und Prozentsätze. Sie können Clamp () für reaktionsschnelle Lücken verwenden, die zwischen den Bildschirmgrößen skalieren. Die Calc () -Funktion, die Einheiten wie Calc (2REM + 10px) kombiniert, wird ebenfalls unterstützt.

GAP -Steuerelemente unterstützen hier auch Designvariablen. Fügen Sie eine Zahlenvariable mit dem Namen "horizontaler Spaltenspalt" mit der Klemme (16px, 2VW, 32px) als Wert hinzu. Wenden Sie diese Variable auf Gap -Steuerelemente auf Ihrer Website an.

Wenn Sie später einen engeren Abstand wünschen, bearbeiten Sie die Variable. Jede Lücke wird sofort aktualisieren.

4. Steuern der Art und Weise, wie Elemente wickeln

Layout -Wraping steuert, was passiert, wenn die Gegenstände aus dem horizontalen Raum ausgehen. Die Standardeinstellung No Wrap hält alles in einer Zeile, indem sie Elemente für den Container verkleinern. Wechseln Sie zu Wrap und Elementen, die nicht passen, fallen in neue Linien und halten Sie ihre natürlichen Größen bei.

Wrap Reverse macht dasselbe wie normaler Wrap, dreht aber die Richtung. Neue Zeilen erscheinen über den vorherigen statt unten.

Dies gibt Ihnen die Kontrolle über visuelle Hierarchie, wenn Elemente überlaufen. Das Verpackungsverhalten bleibt über verschiedene Bildschirmgrößen hinweg konsistent, sodass sich Ihr Layout vorhersehbar vom Desktop zu Mobile anpasst, ohne zu brechen.

DIVI 5 gibt Ihnen auch die Kontrollen für Verpackungsausrichtungen. Diese Funktion wird automatisch angezeigt, wenn Sie Flex-Wraping- und Multiple-Line-Formulare aktivieren. Wenn die Richtung auf eine Reihe eingestellt ist, ist die Verpackungsausrichtung für die vertikale Ausrichtung verfügbar.

Ebenso sind die Optionen für die Spaltenrichtung für die horizontale Ausrichtung.

Stretch lässt sich alle Linien erweitern, um den verfügbaren vertikalen Raum zu füllen. Starten Sie zu Beginn eine Reihe von Linien, mittlere Cluster in der Mitte und enden Sie, indem Sie sie zur gegenüberliegenden Kante drücken.

Der Raum zwischen den Ausbreitungen von Ausbreitungen mit gleichen Lücken, der Platz um jede Linie bietet auf beiden Seiten gleichermaßen Raum und der Raum schafft gleichmäßig identische Lücken zwischen allen Linien.

Dies eignet sich hervorragend für Kartenlayouts, Bildgalerien oder jeden Inhalt, der auf natürliche Weise über mehrere Zeilen fließen muss. Die Elemente behalten ihre Proportionen und ihren Abstand bei und ordnen Sie sie basierend auf der verfügbaren Breite neu an. Sie erhalten saubere Pausen, ohne dass Gegenstände auf kleinen Bildschirmen zusammengedrückt werden.

5. über verschiedene Bildschirmgrößen hinweg arbeiten

Die sieben Haltepunkte von Divi 5 geben Ihnen eine körnige Kontrolle darüber, wie sich Ihre Layouts anpassen.

Jeder Haltepunkt funktioniert unabhängig, sodass Sie Ihre Layout -Richtung auf die Spalte auf dem Handy umstellen können, während Ihr Desktop -Zeilenlayout unberührt bleibt. Sie können alles auf Telefonen konzentrieren, aber diesen Raum zwischen der Ausrichtung auf größeren Bildschirmen behalten.

Ihr Desktop-dreispaltiges Setup kann ein Einspalten-Stapel auf dem Handy werden, ohne die mittleren Haltepunkte zu beeinflussen. Jede Bildschirmgröße erhält genau das, was für dieses Betrachtungserlebnis am besten funktioniert.

Der neue Responsive Editor macht diesen Prozess viel reibungsloser. Klicken Sie auf das Symbol "Responsive Editor" neben jeder Einstellung, um die Werte für alle Bildschirmgrößen gleichzeitig anzuzeigen und zu ändern.

Wenn Sie jedoch Clamp () -Werte verwenden, um Ihre Zeilen und Spalten zu entspannen, würde dies automatisch zwischen den Haltepunkten skalieren, ohne manuelle Änderungen zu erfordern.

6. Erstellen Optionsgruppenvoreinstellungen

Nachdem Sie Ihr Flexbox -Layout so funktionieren lassen, wie Sie es möchten, können Sie diese Einstellungen als Option Group Preset speichern, indem Sie auf die Option Option Group Presets und kennzeichneten kennzeichneten.

Ihre Gap -Werte, Ausrichtungsauswahl und Wickeleinstellungen werden miteinander gebündelt. Wenn Sie auf Speichern klicken, wird diese genaue Layout -Konfiguration auf Ihrer Website wiederverwendbar. Wenn Sie die gespeicherte Voreinstellung verwenden möchten, klicken Sie in der neuen Zeile auf das voreingestellte Symbol und wählen Sie die gerade gespeicherte voreingestellte aus.

Die Voreinstellung hält Ihre fortgeschrittenen Einheiten intakt. Ihr reaktionsschneller Abstand überträgt mit all der von Ihnen eingerichteten Mathematik, und die Änderungen wurden sogar an verschiedenen Haltepunkten vorgenommen.

Beginnen Sie noch heute mit der Flexbox von Divi 5

Flexbox eliminiert die Rand- und Polstermathematik, die beim Wechseln der Layouts bricht. Sie hören nicht mehr mit reaktionsschnellem Design mit Medienabfragen und benutzerdefinierten Abschnitten zu fummeln.

Divi 5 verwandelt diese abstrakten CSS -Eigenschaften in visuelle Steuerelemente. Sie können auf Schaltflächen klicken, um die Richtung einzustellen, Schieberegler zu ziehen, um Lücken anzupassen, und das Ein- und Ausschalten umschalten. Der Responsive Editor übernimmt alle sieben Haltepunkte aus einem Panel, sodass Sie die Ergebnisse sofort sehen, anstatt den Code zu erraten.

Sparen Sie erfolgreiche Kombinationen als Voreinstellung und verwenden Sie sie überall wieder. Sie verbringen Zeit damit, die CSS -Syntax zu entwerfen, anstatt die CSS -Syntax zu debuggen.