Die unglaubliche Leistung der Flexbox

Sep 12, 2025
wie man

FlexBox oder das flexible Box-Layout ist ein leistungsfähiges CSS-Layout-Modul, das Webdesigner und Entwickler ergibt, eine effiziente und einfache Möglichkeit, Elemente in einem Container auszurichten, auszurichten und zu verteilen. Es löst viele Layout-Probleme, die wir seit langem zu lösen haben.

Flexbox-Grundlagen

In seiner grundlegendsten Form besteht Flexbox aus zwei Elementen: ein Flex-Container (oder Flex-Elternteil) und Flex-Artikel (Flex-Kinder). Ein Flexbehälter ist ein enthaltendes Element (wie ein div. ) Angesichts der Display-Eigenschaft biegen . Flex-Elemente sind untergeordnete Elemente eines Flexbehälters, das durch verschiedene Anzeigeeigenschaften manipuliert werden kann.

Flex Container und Flex-Artikel verfügen jeweils über ein eigenes Eigenschaftsbereich, der auf unterschiedliche Weise kombiniert werden kann, um eine Reihe komplexer Layouts zu erstellen. Gegenstände innerhalb eines Flexbehälters können horizontal oder vertikal ausgerichtet, auf verschiedene Weise ausgerichtet und verteilt werden, und gestaltet oder geschrumpft, um den verfügbaren Raum anzupassen. Mit all diesen Optionen können Sie leicht responsive Layouts erstellen.

So verwenden Sie FlexBox

Um mit FLEXBOX zu beginnen, müssen Sie zuerst Ihren Flex-Container erstellen (das übergeordnete Element, das Ihre Flex-Elemente enthält). In diesem Beispiel verwenden wir a div. Block. Bevor wir das Element stylen, fügen wir drei weitere hinzu div. Blöcke in unserem Flex-Container, um als Flex-Artikel zu fungieren. An diesem Punkt werden die Artikel gestapelt.

Mit unserem Kind divs können wir die Display-Eigenschaft des Elterncontainers einstellen biegen . 

 Flex Container {
Anzeige: Flex;
}

Layout-Richtungen.

Die Layoutrichtung ist einfach die Richtung, die Ihre Elemente sich verteilen. Die Standardrichtung eines Flexbehälters ist Reihe , was die untergeordneten Elemente horizontal anzeigt. Sie können das Layout in vertikal wechseln, indem Sie die Richtung einstellen Säule . 

 Flex Container {
Anzeige: Flex;
Flex-Richtung: Reihe;
}

Flex Container {
Anzeige: Flex;
Flex-Richtung: Säule;
}

Welche Richtung, die Sie auf Ihrem Flex-Container einsetzen, wird als "Haupt" -richtung bezeichnet, während die andere Richtung, in der Sie nicht ausgewählt haben, zur "Kreuz" -richtung. Somit ist die Hauptrichtung standardmäßig horizontal und die Querrichtung ist vertikal.

FLEXBOX lässt Sie auch das Layout umkehren. Bei der Umkehrung werden Kinder eines Flexbehälters rechts nach links angelegt (wenn die Richtung ist Reihe ) oder Unterseite nach oben (wenn die Richtung ist) Säule ). 

 Flex Container {
Anzeige: Flex;
Flex-Richtung: Row-Reverse;
}

Flex Container {
Anzeige: Flex;
Flex-Richtung: Säulen-Rückseite;
}

Dies kann praktisch sein, wenn Sie das Layout auf kleineren Bildschirmen umkehren möchten.

Sagen wir beispielsweise auf Desktop-Screens, dass Sie Text auf der linken Seite des Bildschirms anzeigen möchten, und ein Bild rechts (siehe Surfbrettbild oben). Bei Mobile würde dies das Bild unter dem Text verschieben. Wenn Sie die Richtung umkehren, können Sie sicherstellen, dass das Bild stattdessen oberhalb des Textes angezeigt wird.

Anpassung anpassen

Die Einstellungen von FLEXBOX bieten Ihnen auch zwei verschiedene Methoden zum Ausrichten von Inhalten: vertikal und horizontal. Hier sind Ihre horizontalen Ausrichtungsoptionen für Gegenstände in einem Flex-Container:

Flex-Start : Elemente, die auf den Start der Zeile eingestellt sind (links, wenn Sie das Layout nicht umgekehrt haben)

Center : Artikel in der Zeile zentriert

Flex-Ende : Artikel zum Ende der Zeile (rechts, wenn Sie das Layout nicht umgekehrt haben)

Zwischenraum zwischen : Gegenstände gleichmäßig entlang der Reihe verteilt

Platzfolge : Gegenstände, die gleichmäßig entlang der Reihe verteilt sind, mit gleichem Platz auf beiden Seiten jedes Elements

Der Code könnte also so aussehen: 

 Flex Container {
Anzeige: Flex;
Flex-Richtung: Reihe;
Richten-Inhalt: Flex-Start | Flex-End | Zentrum | Platz zwischen | Weltraum | strecken;
}

Hier sind Ihre vertikalen Ausrichtungsoptionen für Elemente in einem Flex-Container:

Flex-Start : Elemente, die an der Oberseite der Zeile ausgerichtet sind

Center : Artikel sind in der Zeile zentriert

Flex-Ende : Elemente, die auf den Boden der Zeile ausgerichtet sind

strecken : Artikel, die über die Höhe der Zeile gedehnt wurden

Baseline : Gegenstände, die an ihre Basislinien ausgerichtet sind (die imaginäre Zeile, die der Text sitzt)

Der Code könnte so aussehen: 

 Flex Container {
Anzeige: Flex;
Flex-Richtung: Reihe;
Ausrichten-Artikel: Flex-Start | Flex-End | Zentrum | Basislinie | strecken;
}

Standardmäßig versuchen die Kinder eines Flexcontainers immer auf eine einzige Linie zu passen. Wenn Sie dies ändern möchten, können Sie das hinzufügen wickeln Attribut. Dies ermöglicht es Kindern, in eine neue Zeile einzuwickeln, wenn sie den Raum ausgehen. 

 Flex Container {
Anzeige: Flex;
Flex-Wrap: Wrap;
}

Flex-Artikel erhalten auch ihre eigenen Flex-basierten Eigenschaften. Wenn ein Element in einem Flex-Container angeordnet ist, wird es automatisch zu einem Flex-Kind, und erteilt ein eigenes Set von flexibasischen CSS-Stilen. Diese Stile steuern die Größen-, Ausrichtung und Anzeigereihenfolge.

Flex-Größen

Flex-Kinder können ihre Breite oder Höhe (abhängig von der Layoutrichtung des Containers) ändern, um den verfügbaren Raum zu füllen.

Webflow gibt Ihnen drei voreingestellte Optionen für die Flex-Dimensionierung: Schrumpfen Sie bei Bedarf ein, füllen Sie den leeren Raum aus und schrumpfen Sie nicht. Beachten Sie, dass jedes untergeordnete Element seine eigenen Einstellungen aufweisen kann, was eine Fülle von Designoptionen ermöglicht. 

 Flex-Artikel {
Flex-Shrink: & lt; number & gt ;;
Flex-wachsen: & lt; number & gt ;;
Flex-Basis: & lt; Länge & gt; | Auto;
}

Schauen wir uns einen Blick darauf, was jede dieser Optionen tut:

  • Schrumpfen, wenn nötig: Größen Sie den Artikel auf der Grundlage seiner Breite / der Höhe oder dessen Inhalt. Der Artikel wird nicht größer, als es muss, muss aber auf seine Mindestgröße schrumpfen, um Überlauf zu verhindern
  • Leerer Speicherplatz füllen: Ermöglicht dem Element, sich zu erweitern, um den gesamten verfügbaren Platz in seinem Elternteil auszufüllen. Wenn Sie dies auf allen Elementen in einem Flex-Container einstellen, werden sie erweitert, um gleiche Mengen an leerem Speicherplatz aufzunehmen
  • Nicht schrumpfen: Größen Sie den Artikel basierend auf der Breite / Höhe oder dessen Inhalt, erlaubt es jedoch nicht, zu schrumpfen, selbst wenn das Überlauf verursacht wird

Flex-Artikel können auch ihre eigenen Ausrichtungseinstellungen aufweisen, die den Standardausrichtung überschreiben, der von ihrem Elternflexbehälter eingestellt ist. Diese Ausrichtungen verhalten sich wie zuvor erläutert. 

 Flex-Artikel {
Anzeige: Flex;
Flex-Richtung: Reihe;
Ausrichten-Artikel: Flex-Start | Flex-End | Zentrum | Basislinie | strecken;
}

Standardeinstellungen werden standardmäßig in derselben Reihenfolge angezeigt, wie sie im Quellcode erscheinen. Mit FLEXBOX können Sie dieses Verhalten überschreiben, um sicherzustellen, dass die Elemente genau der gewünschten Reihenfolge angezeigt werden.

Die sind vier Hauptoptionen, die Sie hier verwenden können:

  • Auto : Der Standardwert, der Elemente aufträgt, wie sie sich in der Quelle befinden
  • Zuerst : Artikel erscheint zuerst in seinem Flex Container
  • Letzte : Artikel erscheint zuletzt in seinem Flex-Container
  • Benutzerdefiniert : Sie können die Bestellung anpassen, in der Ihr Artikel angezeigt wird

Benutzerdefinierte Reihenfolge kann als Nummer definiert werden, die die Reihenfolge angibt, in der das Flex-Artikel in einem Flexbehälter erscheint. 

 Flex-Artikel {
bestellen: & lt; integer & gt ;;
}

Warum sollte ich es benutzen?

Ich bin froh, dass du gefragt hast! Mit FLEXBOX können Sie problemlos ansprechende Layouts erstellen, die einst sehr schwierig (oder unmöglich) mit älteren CSS-Layout-Modulen erstellen.

Schauen Sie sich die Beispiele in das Bild unten an - viele von denen Sie wahrscheinlich bereits über das Web gesehen haben. Fast alle würden eine beträchtliche Menge an CSS (insbesondere in verschiedenen Bildschirmgrößen) annehmen, sondern nur ein paar einfache Linien, um mit Flexbox zu erreichen. Um diese Beispiele in Aktion zu sehen, besuchen Sie flexbox.webflow.com. .

wie man - Die beliebtesten Artikel

How to avoid an Amazon Prime Day 2020 fail

wie man Sep 12, 2025

(Bildkredite: Amazon) Obwohl wir noch nicht das genaue Datum von kennen Amazon Prime Day 2020 Wir wiss..

Erstellen Sie einen Blog mit Grid und Flexbox

wie man Sep 12, 2025

Die letzten zwei bis drei Jahre haben gesehen, dass Layout in Sprünge und Grenzen vorankommen. Nachdem diese modernen Techniken ..

Holen Sie sich mehr von Graphit mit diesen Tipps

wie man Sep 12, 2025

In den letzten drei Jahren habe ich Graphit als Medium zur Illustration verwendet, zuerst nur mit mechanischen Bleistiften, dann ..

So scannen Sie eine Person in weniger als fünf Minuten

wie man Sep 12, 2025

Zugriff auf ein Photogrammetrie-Kameras-Array, um a auszuführen 3D-Scan. ? Kein Problem, diese Tipps und Tricks z..

Farbe kräuselt Wasser in Ölen

wie man Sep 12, 2025

Wenn Sie mit etwas dabei kräuseln, nehmen Sie die Aufgabe, eine zerstörte Reflexion zu malen. Dies kann schwierig sein, sich vorzustellen, also mache ich gerne meine eigene Referenz, bevor ..

4 einfache Schritte zur Verbesserung Ihres Renders

wie man Sep 12, 2025

Die Verwendung von Dome Lights ist in den letzten Jahrzehnten eine der größten Fortschritte der CGI-Erstellung. Das Baden einer..

Was ist neu in Winkel 4?

wie man Sep 12, 2025

Seite 1 von 2: Schritte 1-10. Schritte 1-10. ..

Erstellen Sie qualität digitale Kopien Ihrer Kunst

wie man Sep 12, 2025

Es geht nicht nur darum, es zu schaffen, es geht auch darum, es zu teilen. Sobald Sie eine schöne Arbeit gemacht haben, sind Sie stolz darauf, es ist nur natürlich, dass Sie möchten, dass ..

Kategorien