Flexbox-Beispiele. Layout mit CSS Flexbox. Flex – Abkürzung für die Eigenschaften Flex-Grow, Flex-Shrink und Flex-Basis

CSS-Flexbox (Flexibles Box-Layout-Modul)- flexibles Container-Layout-Modul - ist eine Möglichkeit, Elemente basierend auf der Idee einer Achse anzuordnen.

Flexbox besteht aus flexibler Behälter Und flexible Artikel. Flexible Elemente können in Reihe oder Spalte angeordnet werden, wobei der verbleibende Freiraum auf unterschiedliche Weise zwischen ihnen verteilt wird.

Mit dem Flexbox-Modul können Sie folgende Aufgaben lösen:

• Ordnen Sie Elemente in einer von vier Richtungen an: von links nach rechts, von rechts nach links, von oben nach unten oder von unten nach oben.
• Überschreiben Sie die Anzeigereihenfolge von Elementen.
• Elemente automatisch so dimensionieren, dass sie in den verfügbaren Raum passen.
• Lösen Sie das Problem mit horizontaler und vertikaler Zentrierung.
• Bewegen Sie Gegenstände in einem Behälter, ohne dass dieser überläuft.
• Erstellen Sie Säulen gleicher Höhe.
• Erstellen Sie unten auf der Seite.

Flexbox löst spezifische Probleme – das Erstellen eindimensionaler Layouts, beispielsweise einer Navigationsleiste, da Flex-Elemente nur entlang einer der Achsen platziert werden können.

Eine Liste aktueller Modulprobleme und browserübergreifende Lösungen dafür können Sie im Artikel von Philip Walton lesen.

Was ist Flexbox?

Browserunterstützung

IE: 11,0, 10,0 -ms-
Feuerfuchs: 28,0, 18,0 -moz-
Chrom: 29.0, 21.0 -webkit-
Safari: 6.1 -Webkit-
Oper: 12.1 -Webkit-
iOS-Safari: 7.0 -webkit-
Opera Mini: 8
Android-Browser: 4.4, 4.1 -webkit-
Chrome für Android: 44

1. Grundkonzepte

Zur Beschreibung eines Flexbox-Moduls werden bestimmte Begriffe verwendet. Der Flex-Flow-Wert und der Aufzeichnungsmodus bestimmen die Entsprechung dieser Begriffe zu den physikalischen Richtungen: oben/rechts/unten/links, Achsen: vertikal/horizontal und Abmessungen: Breite/Höhe.

Hauptachse– die Achse, entlang derer flexible Elemente angeordnet sind. Es erstreckt sich bis in die Hauptdimension.

Hauptanfang und Hauptende– Linien, die die Anfangs- und Endseiten des Flex-Containers definieren, relativ zu denen Flex-Elemente angeordnet sind (vom Hauptanfang zum Hauptende).

Hauptgröße) – Die Breite oder Höhe des Flex-Containers oder der Flex-Elemente, je nachdem, welche davon in der Hauptdimension liegt, bestimmt die Hauptgröße des Flex-Containers oder Flex-Elements.

Querachse- Achse senkrecht zur Hauptachse. Es erstreckt sich in der Querdimension.

Queranfang und Querende– Linien, die die Anfangs- und Endseiten der Querachse definieren, relativ zu denen flexible Elemente angeordnet werden.

Kreuzgröße— Die Breite oder Höhe eines Flex-Containers oder von Flex-Elementen, je nachdem, welche in der Querdimension liegt, ist deren Querdimension.

2. Flexbehälter

Ein Flex-Container legt einen neuen flexiblen Formatierungskontext für seinen Inhalt fest. Ein Flex-Container ist kein Blockcontainer, daher funktionieren CSS-Eigenschaften wie float, clear und Vertical-align nicht für untergeordnete Elemente. Außerdem ist der Flex-Container nicht von den Eigenschaften „column-*“ betroffen, die Spalten im Text erstellen, und von den Pseudoelementen::first-line und::first-letter .

Das Flexbox-Markup-Modell ist mit einem bestimmten Wert der CSS-Anzeigeeigenschaft des übergeordneten HTML-Elements verknüpft, das darin untergeordnete Blöcke enthält. Um Elemente mit diesem Modell zu steuern, müssen Sie die Anzeigeeigenschaft wie folgt festlegen:

Flex-container ( /*erzeugt einen Flex-Container auf Blockebene*/ display: -webkit-flex; display: flex; ) .flex-container ( /*erzeugt einen Flex-Container auf Zeilenebene*/ display: -webkit-inline- flex; Anzeige: inline-flex; )

Nach dem Festlegen dieser Eigenschaftswerte wird jedes untergeordnete Element automatisch zu einem Flex-Element, das in einer Reihe (entlang der Hauptachse) aufgereiht wird. In diesem Fall verhalten sich Block- und Inline-Kindelemente gleich, d. h. Die Breite der Blöcke entspricht der Breite ihres Inhalts unter Berücksichtigung der inneren Ränder und Ränder des Elements.

Wenn der übergeordnete Block Text oder Bilder ohne Wrapper enthält, werden sie zu anonymen Flex-Elementen. Der Text wird am oberen Rand des Containerblocks ausgerichtet und die Höhe des Bildes wird angepasst gleiche Höhe blockieren, d.h. es ist deformiert.

3. Flexelemente

Flex-Elemente sind Blöcke, die den Inhalt eines Flex-Containers in einem Flow darstellen. Der Flex-Container erstellt einen neuen Formatierungskontext für seinen Inhalt, der die folgenden Funktionen bewirkt:

• Bei Flex-Elementen ist der Anzeigeeigenschaftswert gesperrt. Anzeigewert: inline-block; und Anzeige: Tabellenzelle; ausgewertet in display: block; .
• Der Leerraum zwischen den Elementen verschwindet: Es wird nicht zu einem eigenen Flex-Element, selbst wenn der Text des Zwischenelements in ein anonymes Flex-Element eingeschlossen wird. Der Inhalt eines anonymen Flex-Elements kann nicht formatiert werden, erbt jedoch Stile (z. B. Schriftartoptionen) vom Flex-Container.
• Ein absolut positioniertes Flex-Element nimmt nicht am Flex-Layout-Layout teil.
• Die Ränder benachbarter Flexelemente fallen nicht zusammen.
• Prozentuale Rand- und Füllwerte werden aus der internen Größe des Blocks berechnet, der sie enthält.
• Rand: automatisch; erweitern sich und absorbieren zusätzlichen Raum in der entsprechenden Dimension. Sie können zum Ausrichten oder Schieben benachbarter Flex-Elemente verwendet werden.
• Die standardmäßige automatische Mindestgröße von Flex-Elementen ist die Mindestgröße ihres Inhalts, d. h. min-width: auto; . Bei scrollbaren Containern beträgt die automatische Mindestgröße normalerweise Null.

4. Anzeigereihenfolge und Ausrichtung der Flex-Elemente

Der Inhalt eines Flex-Containers kann in beliebiger Richtung und Reihenfolge angeordnet werden (die Neuanordnung von Flex-Elementen innerhalb des Containers wirkt sich nur auf die visuelle Darstellung aus).

4.1. Hauptachsenrichtung: Flex-Richtung

Die Eigenschaft bezieht sich auf den Flex-Container. Steuert die Richtung der Hauptachse, entlang der Flex-Elemente gestapelt werden, entsprechend dem aktuellen Schreibmodus. Nicht vererbt.

Syntax

Flex-Container ( display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse; )

4.2. Verwalten von mehrzeiligen Flex-Containern: Flex-Wrap

Die Eigenschaft bestimmt, ob der Flex-Container einzeilig oder mehrzeilig sein wird, und legt außerdem die Richtung der Querachse fest, die die Richtung bestimmt, in der neue Zeilen des Flex-Containers verlegt werden.

Standardmäßig werden Flex-Elemente in einer Zeile entlang der Hauptachse gestapelt. Wenn sie überlaufen, reichen sie über den Begrenzungsrahmen des Flex-Containers hinaus. Die Immobilie wird nicht vererbt.

Syntax

Flex-Container ( Anzeige: -webkit-flex; -webkit-flex-wrap: Wrap; Anzeige: Flex; Flex-Wrap: Wrap; )

4.3. Eine kurze Zusammenfassung von Richtung und Mehrleitung: Flex-Flow

Mit der Eigenschaft können Sie die Richtungen der Haupt- und Querachsen definieren sowie Flexelemente bei Bedarf auf mehrere Linien verschieben. Dies ist eine Abkürzung für die Eigenschaften „Flex-Richtung“ und „Flex-Wrap“. Standardwert flex-flow: row nowrap; . Die Immobilie wird nicht vererbt.

Syntax

Flex-Container ( Anzeige: -webkit-flex; -webkit-flex-flow: Zeilenumbruch; Anzeige: Flex; Flex-Flow: Zeilenumbruch; )

4.4. Reihenfolge der Flex-Artikel anzeigen: Bestellung

Die Eigenschaft definiert die Reihenfolge, in der Flex-Elemente innerhalb eines Flex-Containers angezeigt und angeordnet werden. Gilt für Flex-Artikel. Die Immobilie wird nicht vererbt.

Anfänglich haben alle Flex-Elemente die Reihenfolge: 0; . Wenn Sie für ein Element den Wert -1 angeben, wird es an den Anfang der Zeitleiste verschoben, und ein Wert von 1 wird an das Ende verschoben. Wenn mehrere Flex-Artikel denselben Bestellwert haben, werden sie gemäß der ursprünglichen Bestellung gerendert.

Syntax

Flex-Container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-order: 1; order: 1; )
Reis. 6. Reihenfolge der Flex-Artikel anzeigen

5. Flexibilität von Flexelementen

Der entscheidende Aspekt eines Flex-Layouts ist die Möglichkeit, Flex-Elemente zu „biegen“ und ihre Breite/Höhe (abhängig von der Größe auf der Hauptachse) zu ändern, um den verfügbaren Platz in der Hauptdimension auszufüllen. Dies geschieht mithilfe der Flex-Eigenschaft. Ein Flex-Container verteilt freien Speicherplatz unter seinen untergeordneten Elementen (proportional zu ihrem Flex-Wachstums-Verhältnis), um den Container zu füllen, oder verkleinert sie (proportional zu ihrem Flex-Schrumpf-Verhältnis), um ein Überlaufen zu verhindern.

Ein Flex-Element ist völlig „unflexibel“, wenn seine Flex-Grow- und Flex-Shrink-Werte Null sind, andernfalls „flexibel“.

5.1. Flexible Bemaßungen mit einer Eigenschaft festlegen: Flex

Die Eigenschaft ist eine Abkürzung für die Eigenschaften „flex-grow“, „flex-shrink“ und „flex-basis“. Standardwert: Flex: 0 1 Auto; . Sie können einen oder alle drei Eigenschaftswerte angeben. Die Immobilie wird nicht vererbt.

Syntax

Flex-Container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; )

5.2. Wachstumsfaktor: Flex-Grow

Die Eigenschaft bestimmt die Wachstumsrate eines Flex-Elements im Verhältnis zu anderen Flex-Elementen im Flex-Container bei der Verteilung von positivem Freiraum. Wenn die Summe der Flex-Grow-Werte von Flex-Elementen in einer Reihe kleiner als 1 ist, nehmen sie weniger als 100 % des freien Speicherplatzes ein. Die Immobilie wird nicht vererbt.

Syntax

Flex-Container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-grow: 3; flex-grow: 3; )

5.3. Kompressionsverhältnis: Flex-Schrumpf

Die Eigenschaft gibt das Komprimierungsverhältnis eines Flex-Elements im Verhältnis zu anderen Flex-Elementen an, wenn negativer freier Speicherplatz verteilt wird. Multipliziert mit der Flex-Basisgröße. Negativer Platz wird im Verhältnis dazu zugewiesen, wie stark das Element schrumpfen kann, sodass beispielsweise ein kleines Flex-Element nicht auf Null schrumpft, bis ein größeres Flex-Element merklich verkleinert wird. Die Immobilie wird nicht vererbt.

Syntax

Flex-Container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-shrink: 3; flex-shrink: 3; )

5.4. Grundgröße: Flex-Basis

Die Eigenschaft legt die anfängliche Basisgröße eines Flex-Elements fest, bevor entsprechend den Flex-Faktoren freier Speicherplatz zugewiesen wird. Für alle Werte außer auto und content ist die Basis-Flex-Größe genauso definiert wie die Breite im horizontalen Schreibmodus. Prozentwerte werden relativ zur Größe des Flex-Containers definiert. Wenn keine Größe angegeben ist, werden für Flex-Basis die Abmessungen seines Inhalts als Wert verwendet. Nicht vererbt.

Syntax

Flex-Container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-basis: 100px; flex-basis: 100px; )

6. Ausrichtung

6.1. Ausrichtung der Hauptachse: justify-content

Die Eigenschaft richtet Flex-Elemente entlang der Hauptachse des Flex-Containers aus und verteilt den freien Platz, der nicht von Flex-Elementen belegt wird. Wenn ein Element in einen Flex-Container konvertiert wird, werden Flex-Elemente standardmäßig gruppiert (es sei denn, für sie sind Ränder festgelegt). Lücken werden nach der Berechnung hinzugefügt Margenwerte und Flex-Grow . Wenn Elemente einen Flex-Grow oder einen Rand ungleich Null haben: auto; , hat die Eigenschaft keine Auswirkung. Die Immobilie wird nicht vererbt.

Syntax

Flex-Container ( display: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start; )

6.2. Querachsenausrichtung: align-items und align-self

Flex-Elemente können entlang der Querachse der aktuellen Linie des Flex-Containers ausgerichtet werden. align-items legt die Ausrichtung für alle Flex-Container-Elemente fest, einschließlich anonymer Flex-Elemente. Mit align-self können Sie diese Ausrichtung für einzelne Flex-Elemente überschreiben. Wenn einer der Querränder des Flex-Elements auf auto eingestellt ist, hat align-self keine Auswirkung.

6.2.1. Elemente ausrichten

Die Eigenschaft richtet Flex-Elemente, einschließlich anonymer Flex-Elemente, entlang der Querachse aus. Nicht vererbt.

Syntax

Flex-Container ( display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; )

6.2.2. Sich selbst ausrichten

Die Eigenschaft ist dafür verantwortlich, ein einzelnes Flex-Element an der Höhe des Flex-Containers auszurichten. Überschreibt die durch align-items angegebene Ausrichtung. Nicht vererbt.

Syntax

Flex-Container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-align-self: center; align-self: center; )

6.3. Ausrichten der Zeilen eines Flex-Containers: align-content

Die Eigenschaft richtet Zeilen in einem Flex-Container aus, wenn auf der Querachse zusätzlicher Platz vorhanden ist, ähnlich wie beim Ausrichten einzelner Elemente auf der Hauptachse mithilfe der Eigenschaft „justify-content“. Die Eigenschaft wirkt sich nicht auf einen einzeiligen Flex-Container aus. Nicht vererbt.

Syntax

Flex-Container ( Anzeige: -webkit-flex; -webkit-flex-flow: Zeilenumbruch; -webkit-align-content: Flex-End; Anzeige: Flex; Flex-Flow: Zeilenumbruch; Align-Content: Flex-End ; Höhe: 100px; )

Ich würde gerne über FlexBox sprechen. Flexbox-Layout-Modul (flexible Box – „flexibler Block“, on dieser Moment Die W3C Candidate Recommendation zielt darauf ab, mehr zu bieten effektive Methode Layout, Ausrichtung und Verteilung des freien Raums zwischen Elementen in einem Container, auch wenn ihre Größe unbekannt und/oder dynamisch ist (daher das Wort „flexibel“).

Die Hauptidee des Flex-Layouts besteht darin, dem Container die Möglichkeit zu geben, die Breite/Höhe (und Reihenfolge) seiner Elemente zu ändern, um den Raum besser auszufüllen (in den meisten Fällen, um alle Arten von Displays und Bildschirmgrößen zu unterstützen).Ein flexibler Container streckt Elemente, um den Raum zu füllen, oder komprimiert sie, um ein Überlaufen zu verhindern.

Am wichtigsten ist, dass das Flexbox-Layout im Gegensatz zu herkömmlichen Layouts (vertikal angeordnete Blöcke und horizontal angeordnete Inline-Elemente) nicht von der Richtung abhängt.Während sich das normale Layout hervorragend für Webseiten eignet, fehlt ihm die Flexibilität, große oder komplexe Anwendungen zu unterstützen (insbesondere, wenn es um die Änderung der Bildschirmausrichtung, Größenänderung, Dehnung, Verkleinerung usw. geht)..

Weil Flexbox ist ein ganzes Modul, nicht nur eine einzelne Eigenschaft, es vereint viele Eigenschaften.Einige davon müssen auf den Container (das übergeordnete Element, Flex-Container genannt) angewendet werden, während andere Eigenschaften auf die untergeordneten Elemente oder Flex-Elemente angewendet werden.

Während ein reguläres Layout auf den Flussrichtungen von Block- und Inline-Elementen basiert, basiert ein Flex-Layout auf „Flex-Flussrichtungen“.

Flexbox

Grundsätzlich werden Elemente entweder entlang der Hauptachse (vom Hauptanfang zum Hauptende) oder entlang der Querachse (vom Queranfang zum Querende) verteilt.

Hauptachse – die Hauptachse, entlang der sich Flexelemente befinden.Bitte beachten Sie, dass es horizontal sein muss, alles hängt von der Qualität des Justify-Inhalts ab.
Hauptstart | Hauptende – Flexelemente werden im Container von der Hauptstartposition bis zur Hauptendposition platziert.
Hauptgröße – Breite oder Höhe des Flexelements abhängig von der ausgewählten Hauptgröße.Die Basismenge kann entweder die Breite oder die Höhe des Elements sein.
Querachse - Querachse senkrecht zur Hauptachse.Seine Richtung hängt von der Richtung der Hauptachse ab.
Querstart | Cross-End – Flexleitungen werden mit Elementen gefüllt und von der Cross-Start-Position und der Cross-End-Position im Container platziert.
Kreuzgröße – die Breite oder Höhe des Flexelements entspricht je nach ausgewählter Abmessung diesem Wert.Diese Eigenschaft entspricht je nach gewählter Dimension der Breite oder Höhe des Elements.

Eigenschaften
Anzeige: Flex | Inline-Flex;

Definiert einen Flex-Container (je nach ausgewähltem Wert Inline oder Block) und verbindet einen Flex-Kontext für alle seine unmittelbaren Nachkommen.

Anzeige: andere Werte | Flex | Inline-Flex;

Merken Sie sich:

CSS-Spalten funktionieren nicht mit Flex-ContainernFloat, Clear und Vertical-Align funktionieren nicht mit Flex-Elementen

Flex-Richtung

Gilt vor dem übergeordneten Element des Flex-Containers.

Legt die Hauptachse fest und definiert so die Richtung für im Container platzierte Flex-Elemente.

Flexrichtung: Reihe | Zeilenumkehr | Spalte | spaltenumgekehrt

Zeile (Standard): von links nach rechts für ltr, von rechts nach links für rtl;
Zeilenumkehr: von rechts nach links für ltr, von links nach rechts für rtl;
Spalte: ähnlich der Zeile, von oben nach unten;
Spaltenumkehr: ähnlich wie Zeilenumkehr, von unten nach oben.

Flexfolie

Gilt vor dem übergeordneten Element des Flex-Containers.

Bestimmt, ob der Container einzeilig oder mehrzeilig ist, sowie die Richtung der Querachse und bestimmt die Richtung, in der neue Zeilen platziert werden.

Flex-Wrap: nowrap | wickeln | Wrap-Reverse

nowrap (Standard): einzeilig / von links nach rechts für ltr, von rechts nach links für rtl;
Umbruch: mehrzeilig / von links nach rechts für ltr, von rechts nach links für rtl;
Wrap-Reverse: mehrzeilig / von rechts nach links für ltr, von links nach rechts für rtl.

Flex-Flow

Gilt vor dem übergeordneten Element des Flex-Containers.

Dies ist eine Abkürzung für die Eigenschaften „flex-direction“ und „flex-wrap“, die zusammen die Haupt- und Querachse definieren.Der Standardwert ist row nowrap.

Flex-Flow< ‘flex-direction’> || < ‘Flex-wrap’>

Rechtfertigungsinhalt

Gilt vor dem übergeordneten Element des Flex-Containers.

Definiert die Ausrichtung relativ zur Hauptachse.Hilft bei der Verteilung des freien Speicherplatzes für den Fall, dass sich Linienelemente nicht „dehnen“ oder dehnen, aber bereits ihre maximale Größe erreicht haben.Ermöglicht außerdem eine gewisse Kontrolle über die Ausrichtung von Elementen, wenn diese über die Linie hinausgehen.

rechtfertigen-Inhalt: Flex-Start | Flex-Ende | Mitte | Leerzeichen zwischen | Raum-um

Flex-Start (Standard): Elemente werden an den Anfang der Zeile verschoben;
Flex-Ende: Elemente werden an das Ende der Zeile verschoben.
Mitte: Elemente werden in der Mitte der Linie ausgerichtet;
space-between: Elemente werden gleichmäßig verteilt (erstes Element am Anfang der Zeile, letztes am Ende)
space-around: Elemente werden gleichmäßig mit gleichem Abstand untereinander und außerhalb der Linie verteilt.

Rechtfertigungsinhalt
align-items

Gilt vor dem übergeordneten Element des Flex-Containers.

Definiert das Standardverhalten für die Positionierung von Flex-Elementen relativ zur Querachse in der aktuellen Zeile.Betrachten Sie es als eine Version von justify-content für die Querachse (senkrecht zur Hauptachse).

align-items: flex-start | Flex-Ende | Mitte | Grundlinie | strecken

Flex-Start: Querstart-Grenze für Elemente, die sich an der Querstart-Position befinden;
Flex-End: Querende-Grenze für Elemente, die sich an der Querend-Position befinden;
Mitte: Elemente werden an der Mitte der Querachse ausgerichtet;
Grundlinie: Elemente werden an ihrer Grundlinie ausgerichtet;
stretch (Standard): Elemente werden gestreckt, um den Container zu füllen (unter Berücksichtigung von min-width/max-width).

align-items
Inhalt ausrichten

Gilt vor dem übergeordneten Element des Flex-Containers. Richtet die Zeilen eines Flex-Containers aus, wenn auf der Querachse freier Platz vorhanden ist, ähnlich wie dies bei justify-content auf der Hauptachse der Fall ist. Hinweis: Diese Eigenschaft funktioniert nicht mit einzeiligen Flexboxen.

align-content: flex-start | Flex-Ende | Mitte | Leerzeichen zwischen | Raum-um | strecken

Flex-Start: Linien werden relativ zum Anfang des Containers ausgerichtet;
Flex-End: Linien werden relativ zum Ende des Containers ausgerichtet;
Mitte: Linien werden an der Mitte des Containers ausgerichtet;
space-between: Zeilen werden gleichmäßig verteilt (erste Zeile am Zeilenanfang, letzte am Zeilenende)
space-around: Linien sind gleichmäßig mit gleichem Abstand zueinander verteilt;
stretch (Standard): Linien werden gestreckt, um den verfügbaren Platz auszufüllen.

Inhalt ausrichten
Befehl

Standardmäßig werden Flex-Elemente in ihrer ursprünglichen Reihenfolge angeordnet.Die Reihenfolgeeigenschaft kann jedoch die Reihenfolge steuern, in der sie im Container angezeigt werden.

Bestellung 1

Flex-Grow

Gilt für das untergeordnete Element/Flex-Element. Definiert die Fähigkeit eines Flex-Elements, bei Bedarf zu „wachsen“.Nimmt einen dimensionslosen Wert an und dient als Proportion.Es bestimmt, wie viel freien Platz ein Element innerhalb eines Containers einnehmen kann. Wenn für alle Elemente die Eigenschaft „flex-grow“ auf 1 gesetzt ist, erhält jedes untergeordnete Element die gleiche Größe im Container.Wenn Sie eines der Kinder auf 2 einstellen, nimmt es doppelt so viel Platz ein wie die anderen.

Flex-Grow (Standard 0)

Flex-Schrumpf

Gilt für das untergeordnete Element/Flex-Element.

Definiert die Fähigkeit eines flexiblen Elements, bei Bedarf zu schrumpfen.

Flex-Schrumpf (Standard 1)

Negative Zahlen werden nicht akzeptiert.
Flex-Basis

Gilt für das untergeordnete Element/Flex-Element. Definiert die Standardgröße für ein Element, bevor Platz im Container zugewiesen wird.

Flex-Basis | Automatisch (Standard: Automatisch)

biegen

Gilt für das untergeordnete Element/Flex-Element. Dies ist eine Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis.Der zweite und dritte Parameter (Flex-Shrink, Flex-Basis) sind optional.Der Standardwert ist 0 1 automatisch.

Flex: keine | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]

align-self

Gilt für das untergeordnete Element/Flex-Element. Ermöglicht Ihnen, die Standard- oder Align-Items-Ausrichtung für einzelne Flex-Elemente zu überschreiben. Weitere Informationen zu den verfügbaren Werten finden Sie in der Beschreibung der Eigenschaft „align-items“.

align-self: auto | Flex-Start | Flex-Ende | Mitte | Grundlinie | strecken

Beispiele
Beginnen wir mit einem sehr, sehr einfachen Beispiel, das fast jeden Tag vorkommt: die exakte Ausrichtung auf die Mitte.Nichts könnte einfacher sein, wenn Sie Flexbox verwenden.

Parent ( display: flex; height: 300px; ) .child ( width: 100px; / * Whatever * / height: 100px; / * Whatever * / margin: auto; / * Magic! * / )

Dieses Beispiel basiert auf der Tatsache, dass der Rand unter dem Flex-Container, der auf „Auto“ eingestellt ist, zusätzlichen Platz verbraucht, sodass die Aufgabe, auf diese Weise einzurücken, das Element genau zentriert auf beiden Achsen ausrichtet. Nun verwenden wir einige Eigenschaften.Stellen Sie sich einen Satz von 6 Elementen mit fester Größe (aus Schönheitsgründen) vor, aber mit der Möglichkeit, die Größe des Behälters zu ändern.Wir möchten sie gleichmäßig horizontal verteilen, damit bei der Größenänderung des Browserfensters alles gut aussieht (keine @media-Abfragen!).

Flex-Container (
/ * Zuerst erstellen wir einen Flex-Kontext * /
Anzeige: Flex;

/* Jetzt bestimmen wir die Flussrichtung und ob wir die Elemente wollen
in eine neue Zeile verschoben
*Denken Sie daran, dass dies dasselbe ist wie:
* Flex-Richtung: Reihe;
* Flex-Wrap: Wrap;
* /
Flex-Flow: Zeilenumbruch;

/ * Jetzt legen wir fest, wie der Platz verteilt wird * /
}

Bereit. Alles Weitere ist eine Frage der Anmeldung. Versuchen wir etwas anderes.Stellen Sie sich vor, wir möchten ganz oben auf unserer Website eine rechtsbündige Navigation, auf mittelgroßen Bildschirmen soll sie jedoch zentriert sein und auf kleinen Bildschirmen eine einzelne Spalte.Alles ist ganz einfach.

/*Große Bildschirme*/
.Navigation(
Anzeige: Flex;
Flex-Flow: Zeilenumbruch;
/* Verschiebt Elemente entlang der Hauptachse an das Ende der Zeile * /
rechtfertigen-Inhalt: Flex-Ende;
}

Medien alle und (maximale Breite: 800 Pixel) (
.Navigation(
/* Für mittlere Bildschirme zentrieren wir die Navigation,
gleichmäßigen freien Raum zwischen den Elementen verteilen * /
justify-content: space-around;
}
}

/*Kleine Bildschirme*/
Medien alle und (maximale Breite: 500 Pixel) (
.Navigation(
/ * Auf kleinen Bildschirmen ordnen wir Elemente statt in einer Zeile in einer Spalte an * /
Flexrichtung: Spalte;
}
}

Spielen wir mit der Flexibilität von Flex-Artikeln!Wie wäre es mit einem mobilfreundlichen dreispaltigen Layout mit einer Kopf- und Fußzeile in voller Breite?Und in einer anderen Anordnungsreihenfolge.

Wrapper (
Anzeige: Flex;
Flex-Flow: Zeilenumbruch;
}

/ * Alle Elemente auf 100 % Breite setzen * /
.header, .main, .nav, .aside, .footer (
Flex 1100 %;
}

/* In diesem Fall verlassen wir uns auf die ursprüngliche Reihenfolge, um uns zu leiten
* Mobile Geräte:
* 1 Kopfzeile
* 2 Navigation
* 3 Haupt
* 4 beiseite
* 5 Fußzeile
* /

/*Mittlere Bildschirme*/
Medien alle und (Mindestbreite: 600 Pixel) (
/ * Beide Seitenleisten befinden sich in derselben Zeile * /
.aside (flex: 1 auto; )
}

/*Große Bildschirme*/

Kurz gesagt, Layout mit Flexbox gibt uns einfache Lösungen einmal schwierige Aufgaben. Zum Beispiel, wenn Sie ein Element vertikal ausrichten müssen, die Fußzeile an den unteren Bildschirmrand drücken oder einfach mehrere Blöcke in einer Reihe einfügen müssen, sodass sie den gesamten freien Platz einnehmen. Ähnliche Probleme können ohne Flex gelöst werden. Aber in der Regel handelt es sich bei diesen Lösungen eher um „Krücken“ – Techniken zur Verwendung von CSS für andere als den beabsichtigten Zweck. Mit Flexbox hingegen werden solche Aufgaben genau so gelöst, wie es das Flex-Modell vorsieht.

Das CSS Flexible Box Layout Module (CSS-Modul für Layouts mit flexiblen Blöcken), kurz Flexbox, wurde entwickelt, um die Mängel bei der Erstellung einer Vielzahl von HTML-Designs, einschließlich solcher, die an unterschiedliche Breiten und Höhen angepasst sind, zu beseitigen und das Layout logisch und einfach zu gestalten . Und ein logischer Ansatz funktioniert in der Regel an unerwarteten Stellen, an denen das Ergebnis nicht überprüft wurde – Logik ist alles!

Mit Flexbox können Sie eine Vielzahl von Parametern von Elementen innerhalb eines Containers elegant steuern: Richtung, Reihenfolge, Breite, Höhe, Ausrichtung längs und quer, Verteilung des freien Raums, Dehnung und Komprimierung von Elementen.

Grundwissen

Eine FlexBox besteht aus einem Container und seinen Items (flexiblen Elementen).

Um Flexbox zu aktivieren, muss jedem HTML-Element lediglich die CSS-Eigenschaft display:flex; zugewiesen werden. oder display:inline-flex; .

Nach dem Aktivieren der Flex-Eigenschaft werden im Container zwei Achsen erstellt: Haupt- und Querachse (senkrecht (⊥), Querachse). Alle verschachtelten Elemente (der ersten Ebene) werden entlang der Hauptachse aufgereiht. Standardmäßig ist die Hauptachse horizontal und von links nach rechts gerichtet (→), und die Querachse ist entsprechend vertikal und von oben nach unten gerichtet (↓).

Die Haupt- und Querachsen können vertauscht werden, dann werden die Elemente von oben nach unten angeordnet (↓) und wenn sie in der Höhe nicht mehr passen, verschieben sie sich von links nach rechts (→) – das heißt, die Achsen haben einfach die Plätze getauscht . In diesem Fall ändern sich Anfang und Ende der Anordnung der Elemente nicht – lediglich die Richtungen (Achsen) ändern sich! Aus diesem Grund müssen Sie sich die Achsen im Inneren des Containers vorstellen. Allerdings sollte man nicht denken, dass es einige „physische“ Achsen gibt und diese etwas beeinflussen. Die Achse ist hier lediglich die Bewegungsrichtung der Elemente im Container. Wenn wir beispielsweise die Ausrichtung der Elemente auf die Mitte der Hauptachse festlegen und dann die Richtung dieser Hauptachse ändern, ändert sich die Ausrichtung: Die Elemente befanden sich horizontal in der Mitte, wurden jedoch vertikal in die Mitte ... Siehe das Beispiel.

Ein weiteres wichtiges Merkmal von Flexbox ist das Vorhandensein von Reihen in Querrichtung. Um zu verstehen, wovon wir sprechen, stellen wir uns vor, dass es eine Hauptleitung gibt horizontale Achse, es gibt viele Elemente und sie „passen“ nicht in den Container, also werden sie in eine andere Zeile verschoben. Diese. Ein Container sieht so aus: ein Container mit zwei Zeilen darin, wobei jede Zeile mehrere Elemente enthält. Eingeführt? Denken Sie jetzt daran, dass wir nicht nur Elemente, sondern auch Zeilen vertikal ausrichten können! Wie das funktioniert, sehen Sie am Beispiel der Immobilie gut. Und so sieht es schematisch aus:

CSS-Eigenschaften, die sich auf das Layoutmodell auswirken können: Float, Clear, Vertical-Align, Columns funktionieren im Flex-Design nicht. Hier wird ein anderes Modell zum Aufbau eines Layouts verwendet und diese CSS-Eigenschaften einfach ignoriert.

Flexbox-CSS-Eigenschaften

Flexbox enthält verschiedene CSS-Regeln um das gesamte Flex-Design zu steuern. Einige müssen auf den Hauptcontainer angewendet werden, andere auf die Elemente dieses Containers.

Für Behälter

Aktiviert die Flex-Eigenschaft für das Element. Diese Eigenschaft deckt das Element selbst und seine verschachtelten Elemente ab: Es sind nur Nachkommen der ersten Ebene betroffen – sie werden zu Elementen des Flex-Containers.

• biegen- Das Element erstreckt sich über seine gesamte Breite und hat seinen vollen Platz zwischen den umliegenden Blöcken. Zeilenumbrüche treten am Anfang und Ende des Blocks auf.
• Inline-Flex- Ein Element ist um andere Elemente gewickelt. In diesem Fall wird sein interner Teil als Blockelement formatiert und das Element selbst wird als Inline-Element formatiert.

flex und inline-flex unterscheiden sich darin, dass sie unterschiedlich mit umgebenden Elementen interagieren, ähnlich wie display:block und display:inline-block .

Ändert die Richtung der Hauptachse des Containers. Die Querachse ändert sich entsprechend.

• Zeile (Standard)- Richtung der Elemente von links nach rechts (→)
• Spalte- Richtung der Elemente von oben nach unten (↓)
• Reihenrückwärts- Richtung der Elemente von rechts nach links (←)
• spaltenumgekehrt- Richtung der Elemente von unten nach oben ()

Steuert die Übertragung von Elementen, die nicht in den Container passen.

• nowrap (Standard)- Verschachtelte Elemente werden in einer Zeile (mit Richtung=Zeile) oder in einer Spalte (mit Richtung=Spalte) platziert, unabhängig davon, ob sie in den Container passen oder nicht.
• wickeln- Beinhaltet das Verschieben von Elementen in die nächste Zeile, wenn sie nicht in den Container passen. Dies ermöglicht die Bewegung von Elementen entlang der Querachse.
• Wrap-Reverse- das Gleiche wie beim Wickeln, nur erfolgt die Übertragung nicht nach unten, sondern nach oben (in die entgegengesetzte Richtung).

Kombiniert sowohl Flex-Richtungs- als auch Flex-Wrap-Eigenschaften. Da sie häufig zusammen verwendet werden, wurde die Eigenschaft „flex-flow“ erstellt, um das Schreiben von weniger Code zu erleichtern.

Flex-Flow akzeptiert die Werte dieser beiden Eigenschaften, getrennt durch ein Leerzeichen. Oder Sie können einen einzelnen Wert für eine beliebige Eigenschaft angeben.

/* nur Flex-Richtung */ Flex-Flow: Zeile; Flex-Flow: Reihenrückwärts; Flex-Flow: Spalte; Flex-Flow: Column-Reverse; /* nur Flex-Wrap */ Flex-Flow: Nowrap; Flex-Flow: Wrap; Flex-Flow: Wrap-Reverse; /* beide Werte gleichzeitig: Flex-Direction und Flex-Wrap */ Flex-Flow: Row Nowrap; Flex-Flow: Säulenumhüllung; Flex-Flow: Column-Reverse Wrap-Reverse; rechtfertigen-Inhalt:

Richtet Elemente entlang der Hauptachse aus: wenn Richtung=Zeile, dann horizontal, und wenn Richtung=Spalte, dann vertikal.

• Flex-Start (Standard)- Die Elemente beginnen am Anfang (am Ende kann noch etwas Platz übrig sein).
• Flex-Ende- Elemente werden am Ende ausgerichtet (der Platz bleibt am Anfang)
• Center- in der Mitte (links und rechts bleibt Platz)
• Raum dazwischen- die äußersten Elemente werden gegen die Kanten gedrückt (der Raum zwischen den Elementen wird gleichmäßig verteilt)
• Raum-um- Der Freiraum wird gleichmäßig zwischen den Elementen verteilt (die äußersten Elemente werden nicht gegen die Kanten gedrückt). Der Abstand zwischen dem Behälterrand und den äußeren Elementen ist halb so groß wie der Abstand zwischen den Elementen in der Mitte der Reihe.
• raumgleichmäßig

Richtet die Zeilen mit Elementen entlang der Querachse aus. Identisch mit justify-content, nur für die gegenüberliegende Achse.

Hinweis: Funktioniert, wenn mindestens 2 Zeilen vorhanden sind, d. h. Wenn es nur eine Zeile gibt, passiert nichts.

Diese. wenn flex-direction: row , dann richtet diese Eigenschaft unsichtbare Zeilen vertikal aus. Hierbei ist zu beachten, dass die Höhe des Blocks starr eingestellt sein muss und größer als die Höhe der Reihen sein muss, da sonst die Reihen selbst den Container strecken und jegliche Ausrichtung derselben sinnlos wird, da zwischen ihnen kein freier Raum vorhanden ist sie ... Aber wenn flex-direction: Column , dann bewegen sich die Zeilen horizontal → und die Breite des Containers ist fast immer größer als die Breite der Zeilen und das Ausrichten der Zeilen macht sofort Sinn ...

• dehnen (Standard)- Reihen werden gedehnt, um die Reihe vollständig auszufüllen
• Flex-Start- Zeilen werden oben im Container gruppiert (am Ende kann noch etwas Platz übrig sein).
• Flex-Ende- Zeilen werden am unteren Rand des Containers gruppiert (am Anfang bleibt Platz)
• Center- Reihen werden in der Mitte des Containers gruppiert (an den Rändern bleibt Platz)
• Raum dazwischen- die äußeren Reihen werden gegen die Kanten gedrückt (der Abstand zwischen den Reihen wird gleichmäßig verteilt)
• Raum-um- Der Freiraum wird gleichmäßig zwischen den Reihen verteilt (die äußersten Elemente werden nicht gegen die Kanten gedrückt). Der Abstand zwischen dem Behälterrand und den äußeren Elementen ist halb so groß wie der Abstand zwischen den Elementen in der Mitte der Reihe.
• raumgleichmäßig- das Gleiche wie space-around, nur der Abstand zwischen den äußeren Elementen und den Rändern des Containers ist derselbe wie zwischen den Elementen.

Richtet Elemente entlang einer Querachse innerhalb einer Reihe aus (unsichtbare Reihe). Diese. Die Zeilen selbst werden über align-content ausgerichtet, und die Elemente innerhalb dieser Zeilen (rows) werden über align-items ausgerichtet und zwar alle entlang der Querachse. Es gibt keine solche Unterteilung entlang der Hauptachse, es gibt kein Konzept für Zeilen und Elemente werden durch justify-content ausgerichtet.

• dehnen (Standard)- Elemente werden gestreckt, um die Linie vollständig auszufüllen
• Flex-Start- Elemente werden an den Zeilenanfang gedrückt
• Flex-Ende- Elemente werden bis zum Ende der Reihe gedrückt
• Center- Elemente werden in der Mitte der Reihe ausgerichtet
• Grundlinie- Elemente werden an der Textgrundlinie ausgerichtet

Für Containerelemente

Legt den Vergrößerungsfaktor des Elements fest, wenn im Container freier Platz vorhanden ist. Standard-Flex-Grow: 0, d. h. Keines der Elemente sollte wachsen und den freien Raum im Container füllen.

Standard-Flex-Grow: 0

• Wenn Sie „flex-grow:1“ für alle Elemente angeben, werden sie alle gleich gestreckt und füllen den gesamten freien Platz im Container aus.
• Wenn Sie flex-grow:1 für eines der Elemente angeben, füllt es den gesamten freien Platz im Container aus und Ausrichtungen über justify-content funktionieren nicht mehr: Es gibt keinen freien Platz zum Ausrichten ...
• Mit Flex-Grow:1 . Wenn einer von ihnen über flex-grow:2 verfügt, ist er doppelt so groß wie alle anderen
• Wenn alle Flex-Boxen in einem Flex-Container über flex-grow:3 verfügen, haben sie die gleiche Größe
• Mit Flex-Grow:3 . Wenn einer von ihnen über Flex-Grow:12 verfügt, ist er viermal größer als alle anderen

Wie es funktioniert? Nehmen wir an, ein Container ist 500 Pixel breit und enthält zwei Elemente mit jeweils einer Basisbreite von 100 Pixel. Das bedeutet, dass im Container noch 300 freie Pixel vorhanden sind. Wenn wir nun flex-grow:2; , und das zweite Flex-Grow: 1; , dann nehmen die Blöcke die gesamte verfügbare Breite des Containers ein und die Breite des ersten Blocks beträgt 300 Pixel und die des zweiten 200 Pixel. Dies erklärt sich dadurch, dass die verfügbaren 300 Pixel freien Speicherplatz im Container im Verhältnis 2:1 auf die Elemente verteilt wurden, +200 Pixel für das erste und +100 Pixel für das zweite.

Hinweis: Der Wert kann angegeben werden Bruchzahlen, zum Beispiel: 0,5 - flex-grow:0,5

Legt den Reduktionsfaktor des Elements fest. Die Eigenschaft ist das Gegenteil von Flex-Grow und bestimmt, wie das Element schrumpfen soll, wenn im Container kein freier Platz mehr vorhanden ist. Diese. Die Eigenschaft beginnt zu funktionieren, wenn die Summe der Größen aller Elemente größer als die Größe des Containers ist.

Standard-Flex-Schrumpf:1

Nehmen wir an, der Container ist 600 Pixel breit und enthält zwei Elemente mit jeweils 300 Pixel Breite – flex-basis:300px; . Diese. Zwei Elemente füllen den Behälter vollständig aus. Geben Sie dem ersten Element Flex-Shrink: 2; , und der zweite Flex-Shrink: 1; . Jetzt reduzieren wir die Breite des Containers um 300 Pixel, d.h. Elemente müssen um 300 Pixel verkleinert werden, damit sie in den Container passen. Sie schrumpfen im Verhältnis 2:1, d.h. Der erste Block wird um 200 Pixel und der zweite um 100 Pixel verkleinert und die neuen Elementgrößen betragen 100 Pixel und 200 Pixel.

Hinweis: Sie können im Wert Bruchzahlen angeben, zum Beispiel: 0,5 - flex-shrink:0,5

Legt die Basisbreite des Elements fest – die Breite, bevor andere Bedingungen berechnet werden, die sich auf die Breite des Elements auswirken. Der Wert kann in px, em, rem, %, vw, vh usw. angegeben werden. Die endgültige Breite hängt von der Basisbreite und den Werten von Flex-Grow, Flex-Shrink und dem Inhalt im Block ab. Mit auto erhält das Element eine Basisbreite relativ zum darin enthaltenen Inhalt.

Standard: automatisch

Manchmal ist es besser, die Breite eines Elements über die übliche Eigenschaft width fest festzulegen. Beispiel: Breite: 50 %; bedeutet, dass das Element im Container genau 50 % beträgt, die Flex-Grow- und Flex-Shrink-Eigenschaften jedoch weiterhin funktionieren. Dies kann erforderlich sein, wenn das Element durch den darin enthaltenen Inhalt stärker gedehnt wird, als in Flex-Basis angegeben. Beispiel.

Flex-Basis wird „starr“ sein, wenn Stretch und Shrink auf Null gesetzt sind: Flex-Basis:200px; Flex-Grow:0; Flex-Schrumpf:0; . All dies kann folgendermaßen geschrieben werden: flex:0 0 200px; .

Eine kurze Zusammenfassung der drei Eigenschaften: Flex-Grow Flex-Shrink Flex-Basis .

Standard: Flex: 0 1 automatisch

Sie können jedoch einen oder zwei Werte angeben:

Flex: keine; /* 0 0 auto */ /* Zahl */ flex: 2; /* flex-grow (Flex-Basis geht auf 0) */ /* keine Zahl */ flex: 10em; /* Flex-Basis: 10em */ Flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* Flex-Basis: Inhalt */ Flex: 1 30px; /* Flex-Grow und Flex-Basis */ Flex: 2 2; /* Flex-Grow und Flex-Shrink (Flex-Basis geht auf 0) */ Flex: 2 2 10%; /* Flex-Grow und Flex-Shrink und Flex-Basis */ align-self:

Ermöglicht Ihnen, die Eigenschaft „align-items“ nur für ein einzelnes Element zu ändern.

Standard: aus dem align-items-Container

• strecken- Das Element wird gestreckt, um die Linie vollständig auszufüllen
• Flex-Start- Das Element wird an den Zeilenanfang gedrückt
• Flex-Ende- Das Element wird bis zum Ende der Zeile gedrückt
• Center- Das Element wird an der Mitte der Linie ausgerichtet

Grundlinie- Das Element ist an der Textgrundlinie ausgerichtet

Ermöglicht Ihnen, die Reihenfolge (Position, Position) eines Elements in der allgemeinen Zeile zu ändern.

Standard: Reihenfolge: 0

Standardmäßig haben Elemente die Reihenfolge 0 und werden in der Reihenfolge ihres Erscheinens im HTML-Code und der Richtung der Zeile platziert. Wenn Sie jedoch den Wert der order-Eigenschaft ändern, werden die Elemente in der Reihenfolge der Werte angeordnet: -1 0 1 2 3 ... . Wenn Sie beispielsweise order: 1 für eines der Elemente angeben, werden zuerst alle Nullen eingefügt und dann das Element mit 1.

So können Sie beispielsweise das erste Element ans Ende verschieben, ohne die Bewegungsrichtung der restlichen Elemente oder des HTML-Codes zu ändern.

Anmerkungen

Was ist der Unterschied zwischen Flex-Basis und Breite?

Nachfolgend sind die wichtigen Unterschiede zwischen Flex-Basis und Breite/Höhe aufgeführt:

Flex-Basis funktioniert nur für die Hauptachse. Das bedeutet, dass bei flex-direction:row flex-basis die Breite und bei flex-direction:column die Höhe steuert. .

Flex-Basis gilt nur für Flex-Elemente. Das bedeutet, dass diese Eigenschaft keine Auswirkung hat, wenn Sie Flex für einen Container deaktivieren.

Absolute Containerelemente nehmen nicht an der Flex-Konstruktion teil ... Das bedeutet, dass Flex-Basis keinen Einfluss auf die Flex-Elemente eines Containers hat, wenn diese absolute Position:absolute sind. Sie müssen Breite/Höhe angeben.

• Bei Verwendung der Flex-Eigenschaft können 3 Werte (Flex-Grow/Flex-Shrink/Flex-Basis) kombiniert und kurz geschrieben werden, aber für Breitenwachstum oder -verkleinerung müssen Sie separat schreiben. Zum Beispiel: flex:0 0 50% == width:50%; Flex-Schrumpf:0; . Manchmal ist es einfach unbequem.

Wenn möglich, bevorzugen Sie dennoch die Flex-Basis. Verwenden Sie die Breite nur, wenn die Flex-Basis nicht geeignet ist.

Der Unterschied zwischen Flex-Basis und Breite – ein Fehler oder ein Feature?

Der Inhalt innerhalb eines Flex-Elements drängt es und kann nicht darüber hinausgehen. Wenn Sie die Breite jedoch mit width oder max-width statt mit flex-basis festlegen, kann sich ein Element in einem Flex-Container über die Grenzen dieses Containers hinaus erstrecken (manchmal ist dies genau das gewünschte Verhalten). Beispiel:

Beispiele für Flex-Layouts

Nirgendwo in den Beispielen werden Präfixe aus Gründen der browserübergreifenden Kompatibilität verwendet. Ich habe dies getan, um das CSS leichter lesen zu können. Siehe daher Beispiele in letzte Version Chrome oder Firefox.

#1 Einfaches Beispiel mit vertikaler und horizontaler Ausrichtung

Beginnen wir mit dem einfachsten Beispiel – vertikaler und horizontaler Ausrichtung gleichzeitig und bei jeder Blockhöhe, sogar bei Gummi.

Oder so, ohne einen Block darin:

#1.2 Trennung (Bruch) zwischen Flexblock-Elementen

Um Containerelemente entlang der Kanten zu positionieren und zufällig ein Element auszuwählen, nach dem eine Pause erfolgt, müssen Sie die Eigenschaft margin-left:auto oder margin-right:auto verwenden.

#2 Adaptives Menü auf Flex

Lassen Sie uns ganz oben auf der Seite ein Menü erstellen. Auf einem Breitbildschirm sollte es rechts sein. Im Durchschnitt in der Mitte ausrichten. Und beim Kleinen muss jedes Element in einer neuen Zeile stehen.

#3 Adaptive 3 Spalten

Dieses Beispiel zeigt, wie Sie schnell und bequem 3 Spalten erstellen, die sich beim Verengen in 2 und dann in 1 verwandeln.

Bitte beachten Sie, dass dies ohne die Verwendung von Medienregeln möglich ist, alles erfolgt auf Flex.

Gehen Sie zu jsfiddle.net und ändern Sie die Breite des Abschnitts „Ergebnis“.

#4 Adaptive Blöcke bei Flex

Nehmen wir an, wir müssen drei Blöcke ausgeben, einen großen und zwei kleine. Gleichzeitig ist es notwendig, dass sich die Blöcke an kleine Bildschirme anpassen. Wir machen:

Gehen Sie zu jsfiddle.net und ändern Sie die Breite des Abschnitts „Ergebnis“.

#5 Galerie mit Flex und Übergang

Dieses Beispiel zeigt, wie schnell Sie mit Flex ein süßes Akkordeon mit Bildern erstellen können. Achten Sie auf die Übergangseigenschaft für Flex.

#6 Flex to Flex (nur ein Beispiel)

Die Aufgabe besteht darin, einen flexiblen Block herzustellen. Damit der Textanfang in jedem Block horizontal auf derselben Zeile liegt. Diese. Mit abnehmender Breite wachsen die Blöcke in die Höhe. Es ist notwendig, dass sich das Bild oben befindet, die Schaltfläche immer unten und der Text in der Mitte entlang einer horizontalen Linie beginnt ...

Um dieses Problem zu lösen, werden die Blöcke selbst mit Flex gedehnt und auf die maximal mögliche Breite eingestellt. Jeder interne Block ist ebenfalls eine Flex-Struktur mit einer gedrehten Achse flex-direction:column; und das Element in der Mitte (wo sich der Text befindet) wird gestreckt flex-grow:1; Um den gesamten freien Platz auszufüllen, wird das Ergebnis folgendermaßen erreicht: Der Text begann mit einer Zeile ...

Mehr Beispiele

Browserunterstützung – 98,3 %

Natürlich gibt es keine vollständige Unterstützung, aber alle modernen Browser unterstützen Flexbox-Designs. Einige erfordern immer noch Präfixe. Für ein reales Bild schauen wir uns caniuse.com an und sehen, dass 96,3 % der heute verwendeten Browser ohne Präfixe funktionieren, wobei 98,3 % Präfixe verwenden. Dies ist ein hervorragender Indikator für die sichere Verwendung von Flexbox.

Um zu wissen, welche Präfixe heute (Juni 2019) relevant sind, gebe ich ein Beispiel aller Flex-Regeln mit mit den notwendigen Präfixen:

/* Container */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertikal; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms -flex-flow:Spaltenumbruch; Flex-Flow:Spaltenumbruch; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-line-pack: verteilen; align-content:space-around; ) /* Elemente */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negativ:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :center; align-self:center; -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; )

Es ist besser, wenn Eigenschaften mit Präfixen vor der ursprünglichen Eigenschaft stehen.
Diese Liste enthält keine Präfixe, die heute unnötig sind (laut Caniuse), aber im Allgemeinen gibt es mehr Präfixe.

• (neu) – neue Syntax: display: flex; .
• (Tweener) – alte inoffizielle Syntax von 2011: display: flexbox; .
• (alt) – alte Syntax von 2009: display: box;

Video

Vergessen Sie nicht das Video, manchmal ist es auch interessant und verständlich. Hier sind ein paar beliebte:

Nützliche Links zu Flex

flexboxfroggy.com - Flexbox-Lernspiel.

Flexplorer ist ein visueller Flex-Code-Builder.

Nichts steht still, Technologien und Standards entwickeln sich, neue Techniken und Methoden für das Website-Layout tauchen auf, zum Beispiel wurde das Layout mit tabellarischen Elementen, das wir aus objektiven Gründen nicht in Betracht gezogen haben, durch ein Layout mit schwebenden Elementen ersetzt.

Viele Code-Editoren verfügen über ein praktisches Quick-Markup-Plugin, Emmet, das standardmäßig integriert oder zum Download verfügbar ist. Damit können Sie das grundlegende Markup dieses Beispiels wie folgt durchführen: Abschnitt>div*3>lorem+ Tab (Wert Lorem generiert den Text, der im Bild unten erscheint).

Bitte beachten Sie, dass wir ohne besonderen Aufwand dafür gesorgt haben, dass die Spalten unseres Layouts unabhängig von ihrem Inhalt die gleiche Höhe haben, und das ist großartig. Elemente

sind standardmäßig keine Flex-Elemente und befinden sich im Flow dritte Element