Was ist Flexbox? Beschreibung aller CSS-Eigenschaften, Grundprinzipien, Vor- und Nachteile. Mehrzeilige Organisation von Blöcken innerhalb eines Flex-Containers. Grundgröße: Flex-Basis

Flexbox kann zu Recht als erfolgreicher Versuch bezeichnet werden, eine Vielzahl von Problemen beim Erstellen von Layouts in CSS zu lösen. Aber bevor wir mit der Beschreibung fortfahren, wollen wir herausfinden, was an den Layoutmethoden, die wir jetzt verwenden, falsch ist.

Jeder Layouter kennt mehrere Möglichkeiten, etwas vertikal auszurichten oder ein 3-Spalten-Layout mit einer gummiartigen Mittelspalte zu erstellen. Aber geben wir zu, dass all diese Methoden ziemlich seltsam sind, wie ein Hack aussehen, nicht in allen Fällen geeignet sind, schwer zu verstehen sind und nicht funktionieren, wenn bestimmte magische Bedingungen, die sich historisch entwickelt haben, nicht erfüllt sind.

Dies geschah, weil sich HTML und CSS evolutionär entwickelten. Am Anfang waren Webseiten wie Single-Threaded Textdokumente, wenig später erfolgte die Unterteilung der Seite in Blöcke mit Tabellen, dann wurde es in Mode, mit Gleitkommazahlen zu setzen, und danach offizieller Tod ie6 hat auch Techniken mit Inline-Block hinzugefügt. Als Ergebnis haben wir eine explosive Mischung all dieser Techniken geerbt, die zur Erstellung von Layouts für 99,9 % aller vorhandenen Webseiten verwendet wird.

Mehrzeilige Organisation von Blöcken innerhalb eines Flex-Containers.

Flexfolie

Alle oben genannten Beispiele wurden unter Berücksichtigung der einzeiligen (einspaltigen) Anordnung der Blöcke erstellt. Es muss gesagt werden, dass ein Flex-Container standardmäßig die Blöcke in sich selbst immer in einer Zeile anordnet. Die Spezifikation unterstützt jedoch auch den Multiline-Modus. Die CSS-Eigenschaft „flex-wrap“ ist für mehrzeilige Inhalte innerhalb eines Flex-Containers verantwortlich.

Verfügbare Werte Flexfolie:

• nowrap (Standardwert): Blöcke werden in einer Zeile von links nach rechts angeordnet (in RTL von rechts nach links)
• Wrap: Blöcke werden in mehreren horizontalen Reihen angeordnet (sofern sie nicht in eine Reihe passen). Sie folgen einander von links nach rechts (in RTL von rechts nach links)
• Wrap-Reverse: das Gleiche wie wickeln, aber die Blöcke befinden sich in umgekehrte Reihenfolge.

Flex-Flow ist eine praktische Abkürzung für Flex-Direction + Flex-Wrap

Im Wesentlichen bietet Flex-Flow die Möglichkeit, die Richtung der Haupt- und Mehrlinien-Querachse in einer Eigenschaft zu beschreiben. Standard-Flex-Flow: row nowrap .

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

CSS

/* d.h. ... */ .my-flex-block( flex-direcrion:column; flex-wrap: wrap; ) /* das ist dasselbe wie... */ .my-flex-block( flex-flow: Column Wrap )

Inhalt ausrichten

Es gibt auch eine align-content-Eigenschaft, die bestimmt, wie die resultierenden Blockreihen vertikal ausgerichtet werden und wie sie den gesamten Raum des Flex-Containers aufteilen.

Wichtig: align-content funktioniert nur im mehrzeiligen Modus (d. h. im Fall von flex-wrap:wrap; oder flex-wrap:wrap-reverse;)

Verfügbare Werte Inhalt ausrichten:

• Flex-Start: Blockreihen werden an den Anfang des Flex-Containers gedrückt.
• Flex-Ende: Blockreihen werden an das Ende des Flex-Containers gedrückt
• Mitte: Blockreihen befinden sich in der Mitte des Flex-Containers
• space-between: Die erste Reihe von Blöcken befindet sich am Anfang des Flex-Containers. die letzte Reihe Blöcke blockieren - am Ende werden alle anderen Reihen gleichmäßig auf dem verbleibenden Platz verteilt.
• space-around: Blockreihen sind gleichmäßig vom Anfang bis zum Ende des Flex-Containers verteilt und teilen den gesamten verfügbaren Platz gleichmäßig auf.
• strecken (Standardwert): Die Blockreihen werden gestreckt, um den gesamten verfügbaren Platz einzunehmen.

Die CSS-Eigenschaften flex-wrap und align-content sollten direkt auf den Flex-Container angewendet werden, nicht auf seine untergeordneten Elemente.

Demo von mehrzeiligen Eigenschaften in Flex

CSS-Regeln für untergeordnete Elemente eines Flex-Containers (Flex-Blöcke)

Flex-Basis – die Grundgröße eines einzelnen Flex-Blocks

Legt die Anfangsgröße um fest Hauptachse für einen Flex-Block, bevor Transformationen, die auf anderen Flex-Faktoren basieren, auf ihn angewendet werden. Kann in beliebigen Längeneinheiten (px, em, %, ...) oder automatisch (Standard) angegeben werden. Bei der Einstellung „auto“ werden die Blockabmessungen (Breite, Höhe) zugrunde gelegt, die wiederum, sofern nicht explizit angegeben, von der Größe des Inhalts abhängen können.

Flex-Grow – „Gier“ eines einzelnen Flex-Blocks

Bestimmt bei Bedarf, wie viel größer ein einzelner Flexblock sein kann als benachbarte Elemente. Flex-Grow akzeptiert einen dimensionslosen Wert (Standard 0)

Beispiel 1:

• Wenn alle Flex-Boxen in einem Flex-Container über „flex-grow:1“ verfügen, haben sie die gleiche Größe
• Wenn einer von ihnen über flex-grow:2 verfügt, ist er doppelt so groß wie alle anderen

Beispiel 2:

• Wenn alle Flex-Boxen in einem Flex-Container über flex-grow:3 verfügen, haben sie die gleiche Größe
• Wenn einer von ihnen über Flex-Grow:12 verfügt, ist er viermal größer als alle anderen

Diese Absolutwert Flex-Grow definiert keine genaue Breite. Es bestimmt den Grad seiner „Gierigkeit“ im Verhältnis zu anderen Flexblöcken derselben Stufe.

Flex-Shrink – der „Kompressibilitätsfaktor“ eines einzelnen Flexblocks

Bestimmt, um wie viel der Flexblock im Vergleich zu benachbarten Elementen im Flexcontainer im Falle eines Mangels schrumpft Freiraum. Der Standardwert ist 1.

Flex – Abkürzung für die Eigenschaften Flex-Grow, Flex-Shrink und Flex-Basis

Flex: keine | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

CSS

/* d.h. ... */ .my-flex-block( flex-grow:12; flex-shrink:3; flex basis: 30em; ) /* das ist dasselbe wie... */ .my-flex-block( flex : 12 3 30em )

Demo für Flex-Grow, Flex-Shrink und Flex-Basis

align-self – Ausrichtung eines einzelnen Flexblocks entlang der Querachse.

Ermöglicht das Überschreiben der align-items-Eigenschaft des Flex-Containers für einen einzelnen Flex-Block.

Verfügbare align-self-Werte (dieselben 5 Optionen wie align-items)

• Flex-Start: Der Flex-Block wird an den Anfang der Querachse gedrückt
• Flex-Ende: Der Flexblock wird gegen das Ende der Querachse gedrückt
• Mitte: Der Flexblock befindet sich in der Mitte der Querachse
• Grundlinie: Flexblock ist an der Grundlinie ausgerichtet
• strecken (Standardwert): Flexblock gedehnt, um alles aufzunehmen verfügbarer Platz entlang der Querachse unter Berücksichtigung der Mindestbreite/Maximalbreite, falls vorhanden.

Reihenfolge – die Reihenfolge eines einzelnen Flex-Blocks innerhalb eines Flex-Containers.

Standardmäßig folgen alle Blöcke in der im HTML angegebenen Reihenfolge aufeinander. Diese Reihenfolge kann jedoch über die order-Eigenschaft geändert werden. Es wird als Ganzzahl angegeben und ist standardmäßig 0.

Der Bestellwert gibt nicht die absolute Position des Elements in der Sequenz an. Es bestimmt das Gewicht der Position des Elements.

HTML

IN in diesem Fall, folgen die Blöcke einer nach dem anderen entlang der Hauptachse in der folgenden Reihenfolge: Artikel5, Artikel1, Artikel3, Artikel4, Artikel2

Demo für align-self und order

Rand: automatisch vertikal. Träume werden wahr!

Sie können Flexbox zumindest deshalb lieben, weil die bekannte horizontale Ausrichtung über margin:auto auch hier für Vertikale funktioniert!

My-flex-container ( display: flex; height: 300px; /* Oder was auch immer */ ) .my-flex-block ( width: 100px; /* Oder was auch immer */ height: 100px; /* Oder was auch immer * / margin: auto; /* Magic! Der Block wird vertikal und horizontal zentriert */ )

Dinge, an die man sich erinnern sollte

1. Sie sollten Flexbox nicht verwenden, wenn dies nicht erforderlich ist.
2. Das Definieren von Regionen und das Ändern der Reihenfolge von Inhalten ist in vielen Fällen immer noch sinnvoll, um sie von der Seitenstruktur abhängig zu machen. Denk darüber nach.
3. Flexbox verstehen und die Grundlagen kennen. Dies macht es viel einfacher, das erwartete Ergebnis zu erzielen.
4. Vergessen Sie nicht die Margen. Sie werden bei der Einstellung der Achsausrichtung berücksichtigt. Es ist auch wichtig zu bedenken, dass die Ränder in der Flexbox nicht „kollabieren“, wie dies bei einem normalen Fluss der Fall ist.
5. Der Float-Wert von Flex-Blöcken wird nicht berücksichtigt und hat keine Bedeutung. Dies kann wahrscheinlich irgendwie für eine sanfte Verschlechterung beim Wechsel zur Flexbox genutzt werden.
6. Flexbox eignet sich sehr gut für das Layout von Webkomponenten und Einzelteile Webseiten, zeigte sich aber nicht als solche die beste Seite beim Entwerfen grundlegender Layouts (Position des Artikels, Kopfzeile, Fußzeile, Navigationsleiste usw.). Es ist immer noch umstrittener Punkt, aber dieser Artikel zeigt die Mängel recht überzeugend auf xanthir.com/blog/b4580

Abschließend

Ich denke, dass Flexbox natürlich nicht alle anderen Layoutmethoden ersetzen wird, aber natürlich wird es in naher Zukunft eine würdige Nische bei der Lösung besetzen riesige Menge Aufgaben. Und natürlich müssen Sie jetzt versuchen, mit ihm zusammenzuarbeiten. Einer von nächste Artikel wird gewidmet konkrete Beispiele Arbeiten mit Flex-Layout. Neuigkeiten abonnieren ;)

Über Flexbox wurden bereits viele Artikel geschrieben, alle Parameter werden beschrieben, aber es gibt immer noch Leute, die noch nicht einmal von dieser Technologie gehört haben. Und es ist sehr schlimm. Was aber noch schlimmer ist, ist, dass manche Leute diese wunderbare Technik aufgrund angeblich schlechter Browserunterstützung nicht nutzen. Schauen wir uns nun an, was Flexbox ist, welche Browser es unterstützen und wie, wo und vor allem, es sich lohnt, es zu verwenden.

Ein paar Worte zur Flexbox-Unterstützung

Die aktuelle Flexbox-Spezifikation ist nicht die erste. Im Jahr 2012... Aber wen interessiert das?
Die neue Spezifikation wird laut caniuse bereits von 79 % der Browser unterstützt. Wenn wir diese Unterstützung mit Präfixen hinzufügen, erhalten wir eine Zahl von 83 %. Wenn wir die teilweise Unterstützung in Android 4.1-4.3 berücksichtigen, kommen wir auf fantastische 94,5 %! Sogar der neueste OperaMini unterstützt Flex!

Wer unterstützt Flexbox nicht?

• Internet Explorer kleiner als Version 11 (IE10 unterstützt teilweise die 2012-Spezifikation)
• Leute, die denken, dass „es mit jeder iOS-Version immer mehr nieselt“ und auf Versionen kleiner als 6.1 sind
• Benutzer von UC Browser, der aus irgendeinem Grund immer noch nur teilweise unterstützt wird, obwohl er Webkit als Engine verwendet
• Android-Benutzer unter Version 4.4 (die folgenden Versionen sind immer noch dieselben, unterstützen Flex nur teilweise), die den NATIVE-Browser verwenden.

Der Rest muss im Prinzip nicht einmal erwähnt werden, da ihre Zahl vernachlässigbar ist und jeden Tag gegen Null geht.
An dieser Moment Auf Github wird ein Polyfill entwickelt, um Flex zu unterstützen, aber die Entwicklung geht sehr langsam voran, der Autor bittet um Hilfe und Browser, die diese wunderbare Funktion nicht unterstützen, werden eher in Vergessenheit geraten, als der Autor seine Kreation fertigstellen wird.

Flexbox: Gebrauchsanweisung

Was ist zunächst wissenswert?

Zunächst müssen Sie dem übergeordneten Element display:flex oder display:inline-flex mitteilen. Der Unterschied zwischen ihnen ist derselbe wie zwischen Block und Inline-Block oder zwischen Tabelle und Inline-Tabelle, daher werden wir nicht näher darauf eingehen.

Es gibt Optionen für übergeordnete und untergeordnete Elemente. Ich werde sie trennen, um es klarer zu machen:

Eigenschaften des übergeordneten Containers:

Flex-Direction-Eigenschaft (Achsenrichtung)

Legt fest, in welche Richtung untergeordnete Elemente positioniert werden: horizontal oder vertikal.

Werte:

• Zeile (Standard) – üblich, von links nach rechts
• Spalte - in einer Spalte
• Zeilenumkehr – auf Arabisch, von rechts nach links
• Column-Reverse - idiotischerweise von unten nach oben

justify-content-Eigenschaft (Hauptachsenausrichtung)

Bestimmt die Ausrichtung untergeordneter Elemente nach hauptsächlich Achsen. Es ist zu beachten, dass diese Eigenschaft nicht immer für die horizontale Ausrichtung von Elementen verantwortlich ist. Es ist speziell für die Hauptachse zuständig. Standardmäßig ist die Hauptachse horizontal, aber wenn Sie die Spalteneigenschaft „flex-direction:“ festlegen, wird die Hauptachse vertikal.

Werte:

• Flex-Start (Standard) – Start des übergeordneten Blocks
• Flex-End – Ende des übergeordneten Blocks
• Mitte – Mitte des übergeordneten Blocks

Und hier beginnt der Spaß

• space-between – das erste untergeordnete Element steht am Anfang, das letzte untergeordnete Element steht am Ende. Der Rest ist so angeordnet, dass zwischen ihnen der gleiche Abstand besteht
• space-around – alles ist gleich, aber vor dem ersten und nach dem letzten Element gibt es auch Einrückungen, die den Einrückungen zwischen Elementen entsprechen

align-items-Eigenschaft (Querachsenausrichtung)

Wir haben gewartet! Eine Eigenschaft, die es Ihnen ermöglicht, Hämorrhoiden mit „vertikal-align: center and top: 50 %/transform: translatorY(-50 %)“ zu vergessen.
Vergessen Sie nicht, wie bei der vorherigen Eigenschaft, dass sie für die Ausrichtung entlang der Querachse verantwortlich ist, die je nach Flexrichtungswert vertikal oder horizontal sein kann.

Uns bereits bekannte Bedeutungen:

• Flex-Start – Drücken zum Anfang
• Flex-End – bis zum Ende drücken
• Mitte - in der Mitte

Und noch ein paar andere, um „space-between“ und „space-around“ zu ersetzen:

• Grundlinie – Ausrichtung an der Grundlinie
• stretch (Standard) – dehnt sich um 100 %

Flex-Wrap-Eigenschaft (ein- oder mehrspaltig)

Standardmäßig komprimiert Flex alle Blöcke, sodass sie in eine Reihe passen. Auf Wunsch kann dies geändert werden.

Werte:

• nowrap (Standard) – eine Zeile/Spalte (abhängig vom Flex-Direction-Wert). Alle untergeordneten Blöcke werden komprimiert.
• Wrap – mehrspaltig. Alles, was nicht passt, wird in eine neue Zeile oder Spalte verschoben.
• Wrap-Reverse – das Gleiche, nur umgekehrt: Die Elemente gehen in umgekehrter Reihenfolge vor

Die Eigenschaft align-content (ein kleines Déjà-vu)

Diese Eigenschaft richtet Zeilen/Spalten aus, die durch die Verwendung von Flex-Wrap: Wrap/Wrap-Reverse erstellt wurden.

Werte:

• Flex-Start
• Flex-Ende
• Center
• Raum dazwischen
• Raum-um
• dehnen (Standard)

Ich werde sie nicht beschreiben; sie verteilen Elemente auf die gleiche Weise wie die gleichnamigen Werte in justify-content/align-items.

Eigenschaften von untergeordneten Elementen:

Flex-Basis (Artikelgröße)

Standardwert: automatisch.

Meiner persönlichen Meinung nach die am wenigsten begehrte Immobilie. Gibt die Größe des Elements entlang der Hauptachse an (in beliebigen Maßeinheiten).

Flex-Grow (Element-Erweiterbarkeit)

Standardwert: 0 (belegt keinen freien Speicherplatz).

Gibt an, wie viele Anteile an freiem Speicherplatz das Element für sich beanspruchen kann.

Beispiel 1:
Übergeordnetes Element – ​​Breite 1000 Pixel,
Element-1 – Flex-Wachstum: 1,
Element-2 – Flex-Grow: 3.
Daher hat Element-1 eine Länge von 1000/(1+3)*1=250 Pixel und Element-2 hat die restlichen 750 Pixel.

Beispiel 2:
Die Bedingungen sind die gleichen, aber beide Elemente haben eine Breite von 100 Pixel.
In diesem Fall hat Element-1 eine Breite von (1000-(100+100))/(1+3)*1+100=300px und Element-2 hat eine Breite von 700px.
Was bedeuten diese Berechnungen? Zuerst haben wir den verbleibenden Speicherplatz ermittelt (1000-(100+100)=800) und ihn dann durch geteilt gesamt Anteile (800/(3+1)=200) und gab schließlich dem ersten Element seinen Anteil + 100 Pixel, den es ursprünglich hatte (200*1+100=300).

Flex-Schrumpf (Komprimierbarkeit des Artikels)

Standardwert: 1 (verringert sich gleichmäßig mit anderen Elementen).

Ähnliches Anwesen, aber in Betrieb umgekehrte Richtung. Gibt den Anteil der Blockreduzierung im Verhältnis zu anderen Elementen an.

Beispiel 1:
Übergeordnetes Element – ​​1000 Pixel,
Element-1 – Flex-Shirk: 0,
Element-2 – Flex-Schrumpf: 1,
Beide Elemente haben eine Breite von 650px.
Was wird passieren? Für das erste Element ist die Flex-Shrink-Eigenschaft angegeben: 0, d. h. es ist ihm verboten, abzunehmen. Dies bedeutet, dass das zweite Element dies tun muss. Infolgedessen beträgt die Breite von Element-1 650 Pixel und von Element-2 350 Pixel.

Beispiel 2:
Element-1 – Flex-Schrumpf: 1,
Element-2 – Flex-Schrumpf: 2,
Die übrigen Bedingungen sind die gleichen.
Wie Sie vielleicht schon vermutet haben, beträgt die Breite des ersten Blocks 550 Pixel und die des zweiten 450 Pixel. Aber lassen Sie uns trotzdem verfolgen, was passiert ist:
Zuerst wird die Menge des fehlenden Speicherplatzes ermittelt (650+650-1000=300), dann wird die Größe einer Flex-Shrink-Freigabe berechnet (300/(1+2)=100) und schließlich die darin angegebene Freigabe Stile werden von jedem Element abgezogen (650 -100*1=550px und 650-100*2=450px).

align-self (ein einzelnes Element entlang der Querachse ausrichten)

Gibt die Position entlang der Querachse eines einzelnen Elements an. Sie können align-items: flex-start für den Container angeben und mehrere Elemente beispielsweise an das Ende senden, indem Sie ihnen align-self: flex-end zuordnen.

Die Werte sind die gleichen wie für align-items:

• Flex-Start
• Flex-Ende
• Center
• Grundlinie
• strecken

Bestellung (Artikelbestellung)

Eine Immobilie, mit der Sie Wunder bewirken können. Gibt an, an welche Nummer das Element gehen wird. Sie können Elemente sortieren, indem Sie ihnen diese Eigenschaft zuweisen.

OK, jetzt ist alles vorbei! Wir können einige Eigenschaften auch kombinieren und in abgekürzter Form schreiben (z. B. flex: 1 2 200px), aber vielleicht werden wir darüber nicht sprechen.

Was ich zum Schluss noch sagen möchte:
Flexbox ist wirklich ein erstaunliches Tool. Nachdem Sie es einmal ausprobiert haben, fragen Sie sich, wie Sie ohne es noch auskommen konnten. Damit können Sie den Fluss von Site-Elementen ganz einfach ändern. Dies ist ein sehr praktisches Tool für adaptives Layout.
Aber Sie sollten es nicht überall hinschieben und alles, was Sie können und was nicht, durch es ersetzen. Wie jedes andere Werkzeug sollte es mit Bedacht eingesetzt werden.

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.

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

Reis. 1. Flexbox-Modell

Um ein Flexbox-Modul zu beschreiben, verwenden Sie spezifischer Satz Bedingungen. 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.

Reis. 2. Zeilen- und Spaltenmodus

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-Layoutmodell ist verknüpft mit einen bestimmten Wert CSS-Anzeigeeigenschaften eines übergeordneten HTML-Elements, das 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.

Reis. 3. Elemente im Flexbox-Modell ausrichten

Wenn der übergeordnete Block Text oder Bilder ohne Wrapper enthält, werden sie zu anonymen Flex-Elementen. Der Text ist ausgerichtet Oberkante Containerblock und die Bildhöhe wird 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.
• Prozentwerte Rand und Polsterung werden daraus berechnet interne Größe Block, 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.
• Auto Mindestgröße Flex-Elemente haben standardmäßig 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.

Flex-Richtung
Werte:
Reihe	Der Standardwert ist von links nach rechts (in RTL von rechts nach links). Flexelemente werden in einer Reihe angeordnet. Der Anfang (main-start) und das Ende (main-end) der Hauptachsenrichtung entsprechen dem Anfang (inline-start) und dem Ende (inline-end) der Inline-Achse.
Reihenrückwärts	Die Richtung ist von rechts nach links (in RTL von links nach rechts). Flex-Elemente werden in einer Linie relativ zum rechten Rand des Containers (in RTL - links) angeordnet.
Spalte	Richtung von oben nach unten. Flex-Elemente werden in einer Säule angeordnet.
spaltenumgekehrt	Eine Spalte mit Elementen in umgekehrter Reihenfolge, von unten nach oben.
anfänglich
erben

Reis. 4. Flex-Richtungseigenschaft für Links-nach-rechts-Sprachen

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.

Reis. 5. Mehrzeilige Steuerung mithilfe der Flex-Wrap-Eigenschaft für LTR-Sprachen

Syntax

Flex-Container ( display: -webkit-flex; -webkit-flex-wrap: wrap; display: 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-Direction“ 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 vorhanden sind gleichen Wert order werden sie entsprechend der ursprünglichen Reihenfolge angezeigt.

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, und „flexibel“ in ansonsten.

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.

Reis. 7. Verwalten Sie den Navigationsleistenbereich mit Flex-Grow

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 erst dann auf Null schrumpft, wenn das Flex-Element merklich kleiner ist größere Größe. Die Immobilie wird nicht vererbt.

Reis. 8. Flex-Elemente in einer Reihe eingrenzen

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 der Margin- und Flex-Growing-Werte hinzugefügt. Wenn Elemente einen Flex-Grow oder einen Rand ungleich Null haben: auto; , hat die Eigenschaft keine Auswirkung. Die Immobilie wird nicht vererbt.

Werte:
Flex-Start	Standardwert. Flex-Elemente werden in einer Richtung angeordnet, die von der Startlinie des Flex-Containers ausgeht.
Flex-Ende	Flex-Artikel werden in Richtung der Endlinie des Flex-Containers ausgelegt.
Center	Flex-Artikel werden in der Mitte des Flex-Containers ausgerichtet.
Raum dazwischen	Flexelemente sind gleichmäßig entlang der Linie verteilt. Das erste flexible Element wird bündig mit der Kante der Startlinie platziert, das letzte flexible Element wird bündig mit der Kante der Endlinie platziert und die verbleibenden flexiblen Elemente auf der Linie werden so beabstandet, dass der Abstand zwischen zwei benachbarten Elementen beträgt das gleiche. Wenn der verbleibende freie Speicherplatz negativ ist oder nur ein Flex-Element pro Zeile vorhanden ist, ist dieser Wert identisch mit dem Flex-Start-Parameter.
Raum-um	Die Flex-Elemente auf der Linie werden so verteilt, dass der Abstand zwischen zwei benachbarten Flex-Elementen gleich ist und der Abstand zwischen dem ersten/letzten Flex-Element und den Kanten des Flex-Containers halb so groß ist wie der Abstand zwischen den Flex-Elementen.
anfänglich	Setzt den Eigenschaftswert auf den Standardwert.
erben	Erbt den Eigenschaftswert vom übergeordneten Element.

Reis. 9. Ausrichten von Elementen und Verteilen des freien Speicherplatzes mithilfe der Eigenschaft „justify-content“.

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-Artikel können entlang der Querachse der aktuellen Reihe 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.

Werte:
Flex-Start
Flex-Ende
Center
Grundlinie	Die Grundlinien aller an der Ausrichtung beteiligten Flex-Elemente sind gleich.
strecken
anfänglich	Setzt den Eigenschaftswert auf den Standardwert.
erben	Erbt den Eigenschaftswert vom übergeordneten Element.

Reis. 10. Elemente in einem Container vertikal ausrichten

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.

Werte:
Auto	Standardwert. Ein Flex-Element verwendet die in der Eigenschaft align-items des Flex-Containers angegebene Ausrichtung.
Flex-Start	Die Oberkante des Flex-Elements wird neben der Flex-Linie (oder in einem Abstand unter Berücksichtigung der angegebenen Ränder und Ränder des Elements) platziert und verläuft durch den Anfang der Querachse.
Flex-Ende	Die Unterkante des Flexelements wird neben der Flexlinie (oder in einem Abstand unter Berücksichtigung der angegebenen Ränder und Ränder des Elements) platziert und verläuft durch das Ende der Querachse.
Center	Der Rand eines Flexelements ist entlang der Querachse innerhalb der Flexlinie zentriert.
Grundlinie	Das Flexelement ist an der Grundlinie ausgerichtet.
strecken	Wenn die Quergröße eines Flex-Elements auto ist und keiner der Querrandwerte auto ist, wird das Element gestreckt. Standardwert.
anfänglich	Setzt den Eigenschaftswert auf den Standardwert.
erben	Erbt den Eigenschaftswert vom übergeordneten Element.

Reis. 11. Ausrichten einzelner Flex-Elemente

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.

Werte:
Flex-Start	Die Reihen werden zum Anfang des Flex-Containers hin gestapelt. Der Rand der ersten Zeile wird nahe am Rand des Flex-Containers platziert, jede weitere Zeile wird nahe an der vorherigen Zeile platziert.
Flex-Ende	Die Reihen werden zum Ende des Flexcontainers hin gestapelt. Der Rand der letzten Zeile wird nahe am Rand des Flex-Containers platziert, jede vorherige Zeile wird nahe an der nächsten Zeile platziert.
Center	Die Reihen werden zur Mitte des Flexcontainers hin gestapelt. Die Reihen liegen dicht beieinander und sind auf die Mitte des Flexcontainers ausgerichtet gleicher Abstand zwischen der Anfangskante des Inhalts des Flex-Containers und der ersten Zeile sowie zwischen der Endkante des Inhalts des Flex-Containers und der letzten Zeile.
Raum dazwischen	Die Reihen sind gleichmäßig im Flexcontainer verteilt. Wenn der verbleibende freie Speicherplatz negativ ist oder nur eine Flex-Leitung im Flex-Container vorhanden ist, ist dieser Wert identisch mit flex-start . Andernfalls wird die Kante der ersten Zeile nahe der Anfangskante des Inhalts des Flex-Containers und die Kante der letzten Zeile nahe der Endkante des Inhalts des Flex-Containers platziert. Die übrigen Linien werden so verteilt, dass der Abstand zwischen zwei benachbarten Linien gleich ist.
Raum-um	Die Leitungen sind im Flexcontainer gleichmäßig verteilt, mit halbem Abstand an beiden Enden. Wenn der verbleibende freie Platz negativ ist, ist dieser Wert identisch mit center center . Andernfalls werden die Linien so verteilt, dass der Abstand zwischen zwei benachbarten Linien gleich ist und der Abstand zwischen der ersten / letzte Zeilen und die Ränder des Inhalts des Flex-Containers waren halb so groß wie der Abstand zwischen den Linien.
strecken	Standardwert. Reihen flexibler Artikel dehnen sich gleichmäßig aus, um den gesamten verfügbaren Platz auszufüllen. Wenn der verbleibende freie Speicherplatz negativ ist, ist dieser Wert identisch mit flex-start . Andernfalls wird der Freiraum gleichmäßig auf alle Reihen aufgeteilt, wodurch deren seitliche Größe zunimmt.
anfänglich	Setzt den Eigenschaftswert auf den Standardwert.
erben	Erbt den Eigenschaftswert vom übergeordneten Element.

Reis. 12. Mehrzeilige Ausrichtung von Flexelementen

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 )