Geekly articles weekly

Komplette Flexbox-Anleitung

Komplettes CSS Flexbox Tutorial. Diese vollständige Anleitung erklärt alles über Flexbox und konzentriert sich auf alle möglichen Eigenschaften für das übergeordnete Element (Flex-Container) und die untergeordneten Elemente (Flex-Elemente). Es enthält auch Verlauf, Demos, Vorlagen und ein Browser-Support-Diagramm.

Hintergrund
Das Flexbox-Layout-Modul (Flexible Box) ( W3C Candidate Recommendation of October 2017) soll eine effizientere Möglichkeit bieten, den Raum zwischen Elementen in einem Container zu platzieren, auszurichten und zu verteilen, auch wenn ihre Größe unbekannt und / oder dynamisch ist (Flex bedeutet „flexibel“). .

Die Hauptidee des Flex-Layouts besteht darin, dem Container die Möglichkeit zu geben, die Breite / Höhe seiner Elemente (und die Reihenfolge) zu ändern, um den verfügbaren Platz optimal auszufüllen (hauptsächlich für die Anzeige auf allen Arten von Geräten mit jeder Bildschirmgröße). Der Flex-Container erweitert die Elemente, um den verfügbaren freien Platz zu füllen, oder komprimiert sie, um ein Überlaufen zu verhindern.

Am wichtigsten ist, dass das Flexbox-Layout im Gegensatz zu normalen Layouts richtungsunabhängig ist (Block auf vertikaler Basis und Inline auf horizontaler Basis). Obwohl sie gut für Seiten geeignet sind, fehlt ihnen die Flexibilität (ohne Wortspiel :-)), um große oder komplexe Anwendungen zu unterstützen (insbesondere, wenn es darum geht, die Ausrichtung zu ändern, die Größe zu ändern, zu dehnen, zu komprimieren usw.).

Hinweis : Das Flexbox-Layout eignet sich am besten für Anwendungskomponenten und kleine Layouts, während das Grid-Layout für größere Layouts ausgelegt ist.

Grundlagen und Terminologie
Da Flexbox ein ganzes Modul und keine einzelne Eigenschaft ist, enthält es viele Elemente mit einer Reihe von Eigenschaften. Einige von ihnen sind für die Installation in einem Container vorgesehen (das übergeordnete Element wird als „Flex-Container“ bezeichnet), während andere für die Installation in untergeordneten Elementen (die sogenannten „Flex-Elemente“) vorgesehen sind.

Wenn das „normale“ Layout sowohl auf Block- als auch auf Inline-Richtungen basiert, basiert das Flex-Layout auf „Flex-Flow-Richtungen“. Bitte sehen Sie sich diese Zeichnung aus der Spezifikation an, in der die Grundidee eines flexiblen Layouts erläutert wird.



Die Elemente befinden sich entweder in Richtung der Hauptachse ( Hauptachse vom Hauptstart zum Hauptende ) oder in Richtung der Querachse ( Querachse vom Kreuzstart zum Kreuzende ).

  • Hauptachse - Die Hauptachse des Flexcontainers ist die Hauptachse, entlang der sich die Flexelemente befinden. Seien Sie vorsichtig, diese Achse muss nicht unbedingt horizontal sein. Dies hängt von der Eigenschaft der Biegerichtung ab (siehe unten).
  • Hauptstart | Hauptende - Flex-Elemente werden in den Container gelegt, beginnend mit dem Hauptstart und endend mit dem Hauptende.
  • Hauptgröße - die Breite oder Höhe des Flex-Elements, je nachdem, was sich in der Hauptabmessung befindet. Sie wird durch die Hauptgröße der Flexelemente bestimmt, d.h. Eigenschaft 'Breite' oder 'Höhe', je nachdem, was sich in der Hauptdimension befindet.
  • Querachse - die Achse senkrecht zur Hauptachse, die als Querachse bezeichnet wird. Seine Richtung hängt von der Richtung der Hauptachse ab.
  • Kreuzstart | Cross-End - Flex-Linien werden mit Elementen gefüllt und im Container platziert, beginnend mit dem Cross-Start-Flex des Containers zum Cross-End.
  • Kreuzgröße - Breite oder Höhe des Flexelements. Abhängig von der CSS-Eigenschaft der Flex-Richtung ist dies die Breite oder Höhe des Elements. Dies ist immer die Quergröße der flexiblen Elemente.


Eigenschaften für Eltern (Flex-Container)




Anzeige


Definiert einen Flex-Container. Inline oder Block abhängig vom eingestellten Wert. Aktiviert den Flex-Kontext für alle Nachkommen der ersten Ebene.

.container { display: flex; /* or inline-flex */ }

Denken Sie daran:

Beachten Sie, dass CSS-Spalten den Flex-Container nicht beeinflussen.

Flex-Richtung



Legt die Hauptachse fest und bestimmt so die Richtung der im Flex-Container platzierten Flex-Elemente. Flexbox ist (zusätzlich zur optionalen Verpackung) ein Einweg-Layoutkonzept. Stellen Sie sich Flex-Elemente als primäre Layouts in horizontalen Zeilen oder vertikalen Spalten vor.

 .container { flex-direction: row | row-reverse | column | column-reverse; }

  • Zeile (Standard): von links nach rechts in ltr ; von rechts nach links in rtl
  • Zeilenumkehr von rechts nach links ltr ; von links nach rechts in rtl
  • Spalte : wie Zeile, jedoch von oben nach unten
  • Spaltenumkehrung : dasselbe, Zeilenumkehrung, jedoch von unten nach oben

Flex-Wrap



Standardmäßig versuchen Flex-Elemente, in eine Zeile zu passen. Mit dieser Eigenschaft können Sie dies ändern und zulassen, dass Elemente nach Bedarf in eine neue Zeile springen.

 .container{ flex-wrap: nowrap | wrap | wrap-reverse; }

  • nowrap (Standard): Alle Flex-Elemente befinden sich in derselben Zeile
  • Wrap : Flex-Elemente wickeln mehrere Zeilen von oben nach unten.
  • Wrap-Reverse : Flex-Elemente wickeln mehrere Zeilen von unten nach oben ein.

Sehen Sie sich hier visuelle Demos des Flex-Wrap-Verhaltens an .

Flex-Flow (Gilt für: übergeordnetes Element des Flex-Containers)


Dies ist eine Abkürzung für die Flex-Direction- und Flex-Wrap- Eigenschaften, die zusammen die Haupt- und Querachse des Flex-Containers definieren. Der Standardwert ist row nowrap .

 flex-flow: <'flex-direction'> || <'flex-wrap'>

Inhalt rechtfertigen




Diese Eigenschaft bestimmt die Ausrichtung entlang der Hauptachse. Es hilft, den zusätzlichen Rest des freien Speicherplatzes zu verteilen, da alle flexiblen Elemente in einer Reihe unflexibel oder flexibel sind, aber ihre maximale Größe erreicht haben. Es bietet auch eine gewisse Kontrolle über die Ausrichtung von Elementen, wenn diese über die Linie laufen.

 .container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; }

  • Flex-Start (Standard): Elemente werden an den Anfang der Flex-Richtung verschoben.
  • Flex-Ende : Elemente werden näher an das Ende der Flex-Richtung verschoben.
  • start : Elemente werden an den Anfang der Schreibmodusrichtung verschoben.
  • Ende : Elemente werden am Ende der Schreibmodusrichtung verschoben.
  • links : Elemente werden zum linken Rand des Containers verschoben. Wenn dies keine sinnvolle Biegerichtung ergibt, verhält es sich wie Start .
  • rechts : Elemente werden zum rechten Rand des Containers verschoben. Wenn dies keine sinnvolle Biegerichtung ergibt, verhält es sich wie Start .
  • Mitte : Elemente werden entlang der Linie zentriert
  • Zwischenraum : Elemente sind gleichmäßig entlang der Linie verteilt; Das erste Element befindet sich am Anfang der Zeile, das letzte Element am Ende der Zeile
  • Raum um : Elemente sind gleichmäßig entlang der Linie verteilt, mit demselben Raum um sie herum. Beachten Sie, dass die Leerzeichen visuell nicht gleich sind, da alle Elemente auf beiden Seiten den gleichen Abstand haben. Das erste Element hat eine Raumeinheit gegenüber dem Rand des Containers, aber zwei Raumeinheiten zwischen dem nächsten Element, da das nächste Element einen eigenen Abstand hat, der gilt.
  • Raumgleichmäßig : Die Elemente sind so verteilt, dass der Abstand zwischen zwei beliebigen Elementen (und der Abstand zu den Kanten) gleich ist.

Bitte beachten Sie, dass die Browserunterstützung für diese Werte ihre eigenen Nuancen hat. Beispielsweise hat Leerzeichen nie Edge-Unterstützung erhalten, und Start / Ende / Links / Rechts befindet sich noch nicht in Chrome. MDN hat detaillierte Grafiken . Die sichersten Werte sind Flex-Start , Flex-End und Center .

Es gibt auch zwei zusätzliche Schlüsselwörter, die Sie diesen Werten zuordnen können: sicher und unsicher . Durch die Verwendung von safe wird sichergestellt, dass Sie das Element unabhängig von Ihrer Positionierung nicht so positionieren können, dass es außerhalb des Bildschirms angezeigt wird (z. B. von oben), sodass der Inhalt auch nicht gescrollt werden kann (dies wird als „Datenverlust“ bezeichnet). .

Elemente ausrichten




Diese Eigenschaft bestimmt das Standardverhalten der Position von Flex-Elementen entlang der Querachse auf der aktuellen Linie. Stellen Sie sich das als eine Version mit Rechtfertigungsinhalt für die Querachse (senkrecht zur Hauptachse) vor.

 .container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; }


  • Dehnen (Standard): Dehnen, um den Container zu füllen (Min-Breite / Max-Breite wird weiterhin eingehalten)
  • Flex-Start / Start / Selbststart : Elemente werden am Anfang der Querachse platziert. Der Unterschied zwischen ihnen ist gering und besteht in der Einhaltung von Flex-Direction- Regeln oder Schreibmodus- Regeln.
  • Flex-Ende / Ende / Selbst-Ende : Elemente werden am Ende der Querachse positioniert. Der Unterschied ist wiederum subtil und entspricht den Regeln für die Flex-Richtung oder den Schreibmodus .
  • Mitte : Elemente werden auf der Querachse zentriert
  • Grundlinie : Elemente werden entsprechend ihrer Grundlinie ausgerichtet

Schlüsselwörter für sichere und unsichere Modifikatoren können in Kombination mit all diesen Schlüsselwörtern verwendet werden ( obwohl dies nicht von allen Browsern unterstützt wird ). Dies verhindert, dass Elemente ausgerichtet werden, sodass auf den Inhalt nicht mehr zugegriffen werden kann.

Inhalt ausrichten




Diese Eigenschaft richtet Linien innerhalb des Flex-Containers aus, wenn auf der Querachse zusätzlicher Platz vorhanden ist, ebenso wie der Rechtfertigungsinhalt einzelne Elemente innerhalb der Hauptachse ausrichtet.

Hinweis : Diese Eigenschaft gilt nicht, wenn nur eine Zeile mit Flex-Elementen vorhanden ist.

 .container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; }

  • Flex-Start / Start : Elemente werden an den Anfang des Containers verschoben. Der stärker unterstützte Flex-Start verwendet die Flex-Richtung, während der Start die Schreibmodus- Richtung verwendet.
  • Flex-End / End : Elemente werden an das Ende des Containers verschoben. Das stärker unterstützte Flex-Ende verwendet die Flex-Richtung , während das Ende die Schreibmodus- Richtung verwendet.
  • Mitte : Elemente werden im Container zentriert
  • Zwischenraum : Elemente sind gleichmäßig verteilt; Die erste Zeile befindet sich am Anfang des Containers und die letzte am Ende
  • Leerzeichen : Elemente werden gleichmäßig mit gleichem Abstand um jede Zeile verteilt
  • Raumgleichmäßig : Elemente sind gleichmäßig verteilt, der gleiche Raum um sie herum
  • strecken (Standard): Linien werden gestreckt, um den verbleibenden Platz einzunehmen

Schlüsselwörter für sichere und unsichere Modifikatoren können in Kombination mit all diesen Schlüsselwörtern verwendet werden (obwohl dies nicht von allen Browsern unterstützt wird). Dies verhindert, dass Elemente ausgerichtet werden, sodass auf den Inhalt nicht mehr zugegriffen werden kann.

Eigenschaften für die ersten untergeordneten Elemente (Flex-Elemente)




bestellen




Standardmäßig befinden sich Flex-Artikel in der ursprünglichen Reihenfolge. Die order- Eigenschaft steuert jedoch die Reihenfolge, in der sie im Flex-Container angezeigt werden.

 .item { order: <integer>; /* default is 0 */ }

Flex-Grow




Diese Eigenschaft bestimmt die Fähigkeit des Flex-Elements, sich bei Bedarf zu dehnen. Es nimmt einen Wert von Null an, der als Anteil dient. Diese Eigenschaft gibt an, wie viel Platz ein Element in einem flexiblen Container einnehmen soll.

Wenn alle Flex-Grow- Elemente auf 1 gesetzt sind, wird der verbleibende Platz im Container gleichmäßig auf alle untergeordneten Elemente verteilt. Wenn eines der Kinder den Wert 2 hat, nimmt dieses Element doppelt so viel Platz ein wie die anderen (oder versuchen Sie es zumindest).

 .item { flex-grow: <number>; /* default 0 */ }

Negative Zahlen werden nicht unterstützt.

Flex-Shrink


Diese Eigenschaft bestimmt die Fähigkeit des flexiblen Mitglieds, bei Bedarf Verträge abzuschließen.

 .item { flex-shrink: <number>; /* default 1 */ }

Negative Zahlen werden nicht unterstützt.

Flex-Basis


Diese Eigenschaft bestimmt die Standardelementgröße, bevor der verbleibende Speicherplatz zugewiesen wird. Dies kann eine Länge (z. B. 20%, 5rem usw.) oder ein Schlüsselwort sein. Das Schlüsselwort auto bedeutet "Meine Breite oder Höhe anzeigen". Der Keyword- Inhalt bedeutet "Größe basierend auf dem Inhalt des Elements". Dieses Keyword wird immer noch nicht sehr gut unterstützt. Daher ist es schwierig zu überprüfen, ob Max-Content , Min-Content oder Fit-Content verwendet werden .

 .item { flex-basis: <length> | auto; /* default auto */ }

Bei der Einstellung 0 wird der zusätzliche Platz um den Inhalt nicht berücksichtigt. Bei der Einstellung " Automatisch" wird zusätzlicher Speicherplatz basierend auf dem Flex-Grow- Wert zugewiesen.
Siehe dieses Bild.


flex


Dies ist eine Abkürzung für die gemeinsame Verwendung von Flex-Grow , Flex-Shrink und Flex-Base . Der zweite und dritte Parameter ( Flex-Shrink und Flex-Basis ) sind optional. Standardmäßig ist es 0 1 auto .

 .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

Es wird empfohlen, diese Kurzform zu verwenden, anstatt einzelne Eigenschaften festzulegen. Diese Abkürzung setzt intelligent andere Bedeutungen.

Selbst ausrichten




Mit dieser Eigenschaft können Sie die Standardausrichtung (oder mithilfe von Ausrichtungselementen angegeben) für einzelne Flexelemente überschreiben.
Weitere Informationen zu den verfügbaren Werten finden Sie in der Eigenschaft align-items .

 .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

Beachten Sie, dass die Eigenschaften Float , Clear und Vertical Align keine Auswirkungen auf Flex-Elemente haben.

Beispiele


Beginnen wir mit einem sehr einfachen Beispiel, das ein fast tägliches Problem löst: perfekte Zentrierung. Die einfachste Lösung für diese Aufgabe ist die Verwendung der Flexbox.

 .parent { display: flex; height: 300px; /*    */ } .child { width: 100px; /*    */ height: 100px; /*    */ margin: auto; /* ! */ }

Dies liegt an der Tatsache, dass die im Flex-Container auf Auto eingestellte Eigenschaft für den vertikalen Ausrichtungsrand zusätzlichen Platz absorbiert. Wenn Sie den Rand auf Auto setzen, wird das Objekt perfekt auf beiden Achsen zentriert.

Lassen Sie uns nun einige weitere Eigenschaften verwenden. Betrachten Sie eine Liste von 6 Elementen, alle mit festen Größen, aber es kann automatische Größen geben. Wir möchten, dass sie gleichmäßig entlang der horizontalen Achse verteilt sind, damit beim Ändern der Größe des Browsers alles gut und ohne Medienabfragen skaliert werden kann.

 .flex-container { /*    flex  */ display: flex; /*    flex-direction        * ,       : * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /*   ,     */ justify-content: space-around; }

Fertig. Alles andere ist nur Styling.



Wenn Sie die Bildschirmauflösung oder den Maßstab ändern, sieht dies folgendermaßen aus:



Versuchen wir etwas anderes. Stellen Sie sich vor, wir haben oben auf unserer Website rechtsbündige Navigationselemente, die jedoch auf mittelgroßen Bildschirmen in der Breite ausgerichtet und auf kleinen Geräten in einer Spalte angeordnet sein sollen. Es ist ganz einfach.

 /*   */ .navigation { display: flex; flex-flow: row wrap; /*           */ justify-content: flex-end; } /*   */ @media all and (max-width: 800px) { .navigation { /*       ,       */ justify-content: space-around; } } /*   */ @media all and (max-width: 500px) { .navigation { /*         ,    */ flex-direction: column; } }

Große Bildschirme

Mittlere Bildschirme

Kleine Bildschirme


Versuchen wir etwas noch besseres, indem wir mit der Flexibilität von Flex-Gegenständen spielen! Wie wäre es mit einem 3-Spalten-Ganzseiten-Layout mit Kopf- und Fußzeile? Und es kommt nicht auf die ursprüngliche Reihenfolge der Elemente an.

 .wrapper { display: flex; flex-flow: row wrap; } /*  ,      100%,  flex-base */ .wrapper > * { flex: 1 100%; } /*         * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /*   */ @media all and (min-width: 600px) { /*          */ .aside { flex: 1 auto; } } /*   */ @media all and (min-width: 800px) { /*            ,      ,      */ .main { flex: 2 0px; } .aside-1 { order: 1; } .main { order: 2; } .aside-2 { order: 3; } .footer { order: 4; } }

Große Bildschirme

Mittlere Bildschirme

Kleine Bildschirme


Präfix für Flexbox
Flexbox benötigt ein Präfix für eine bessere Unterstützung in allen Browsern. Es enthält nicht nur Voreinstellungen mit einem Herstellerpräfix, sondern auch völlig andere Eigenschaftsnamen und -werte. Dies liegt an der Tatsache, dass sich die Flexbox-Spezifikationen im Laufe der Zeit geändert haben. Es gibt „alte“, „Tweener“ - und „neue“ Versionen .

Vielleicht ist der beste Weg, dies zu handhaben, eine neue (und letzte) Syntax zu schreiben und Ihr CSS über Autoprefixer auszuführen , was sehr gut funktioniert.

Hier ist auch Sass @mixin, um mit einigen Präfixen zu helfen, die Ihnen auch eine Vorstellung davon geben, was zu tun ist:

 @mixin flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; } @mixin order($val) { -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; } .wrapper { @include flexbox(); } .item { @include flex(1 200px); @include order(2); }

Andere Quellen

Fehler
Flexbox ist natürlich nicht ohne Fehler. Die beste Sammlung, die ich gesehen habe, sind die Flexbugs von Philip Walton und Greg Whitworth. Dies ist ein Open-Source-Repository, mit dem Sie alle verfolgen können. Ich denke, es ist am besten, nur darauf zu verweisen.

Browser-Unterstützung


Aufgeschlüsselt nach der „Version“ der Flexbox:

  • (neu) bedeutet aktuelle Syntax aus der Spezifikation (z. B. Anzeige: Flex; )
  • (Tweener) bedeutet seltsame informelle Syntax seit 2011 (z. B. Anzeige: Flexbox; )
  • (alt) bedeutet die alte Syntax seit 2009 (z. B. display: box; )



Blackberry Browser 10+ unterstützt die neue Syntax.

Weitere Informationen zum Mischen von Syntaxen, um eine bessere Browserunterstützung zu erhalten, finden Sie in diesem Artikel (CSS-Tricks) oder in diesem Artikel (DevOpera) .

Source: https://habr.com/ru/post/de467049/

More articles:


All Articles