CSS Flexible Box -Layout

Flexbox
CSS Flexible Box -Layout
Abkürzung Flexbox
Einheimischer Name
CSS Flexible Box -Layout
Status Empfehlung von Kandidaten (CR)
Jahr begann 23. Juli 2009[1]
Letzte Version Level 1[2]
9. November 2018[2]
Vorschau -Version Arbeitsentwurf
25. März 2021[3]
Organisation
Komitee CSS -Arbeitsgruppe[2]
Redakteure
  • Tab Atkins Jr.
  • Elika J. Etemad
  • Rossen Atanassov
Ehemalige Herausgeber
    • Alex Mogilevsky
    • L. David Baron
    • Neil Deakin
    • Ian Hickson
    • David Hyatt
[2]
Grundstandards CSS
Webseite www.W3.org/Tr/CSS-Flexbox-1/

CSS Flexible Box -Layout, Üblicherweise bekannt als Flexbox,[2] ist ein CSS 3 Web -Layout -Modell.[4] Es ist in der W3c's Kandidatenempfehlung (CR) Stufe.[2] Das Flex -Layout erlaubt es reaktionsschnell Elemente innerhalb eines Containers, die je nach Bildschirmgröße (oder Gerät) automatisch angeordnet werden sollen.

Konzepte

Die meisten Webseiten sind in einer Kombination von geschrieben Html (Hypertext -Markup -Sprache) und CSS (Cascading Style Sheets). Kurz gesagt, HTML gibt die an Inhalt und logische Struktur der Seite, während das CSS angibt wie es aussieht: seine Farben, Schriftarten, Formatierung, Layout und Styling.

Das CSS-Flex-Box-Layout ist eine besondere Möglichkeit, das Layout von HTML-Seiten anzugeben.

Eines der definierendsten Merkmale des Flex-Layouts ist die Fähigkeit, auf der Grundlage seiner Betrachtungsumgebung zu fördern. Flex -Boxen können sich an die Größe anpassen - entweder abnehmen, um unnötig monopolisierende Raum zu vermeiden, oder um Platz für den Einschränkung von Inhalten innerhalb seiner Grenzen zu schaffen. Darüber hinaus ist das Flex-Layout in Bezug auf den Inhaltsfluss weniger restriktiv als beispielsweise der Block- und Inline-Anzeigetypen, die im Allgemeinen unisch-lichtend sind. Der Flex -Richtungsfluss kann als rechts, links, oben oder unten angegeben werden. Einzelne Elemente in einem Flex -Behälter können auch automatisch neu angeordnet und neu ordnet, um den verfügbaren Layout -Raum zu entsprechen.[3]

Geschichte

In den 2000er Jahren die intensive Nutzung des Webs von Mobile Agenten motivierte "flüssige Layouts" und reaktionsschnelle Elemente für die wachsende Vielfalt von Bildschirmgrößen.[5] In den 2010er Jahren der intensive Einsatz von Bevölkerung JavaScript Layout Frameworks, wie zum Beispiel Bootstrap, inspirierte CSS Flex-Box- und Raster-Layout-Spezifikationen.[6]

CSS 3 -Module enthielten Lösungen, die diesem ähnlichen sind, wie Flexbox[2] und Netz.[7]

Ab September 2020, 98,69% der installierten Browser (99,29% der Desktop -Browser und 100% der mobilen Browser) unterstützen CSS Flexible Box -Layout.[8]

Terminologie

Die folgenden Begriffe sind dem FlexBox -Layout -Modell zugeordnet.

Flexbehälter
Elternelement, das alle Flexelemente enthält. Unter Verwendung der CSS-Anzeigeeigenschaft kann der Container entweder als Flex- oder Inline-Flex definiert werden.
Flex Artikel
Jedes direkte untergeordnete Element unter dem Flexbehälter wird als Flex -Element angesehen. Jeder Text im Containerelement ist in ein unbekanntes Flex -Element eingewickelt.
Äxte
Jede Flexbox enthält zwei Achsen: die Haupt- und Kreuzachsen. Das Hauptachse ist die Achse, auf der die Elemente miteinander übereinstimmen. Das Kreuzachse ist senkrecht zur Hauptachse.
Flex-Richtung
Etabliert die Hauptachse. Mögliche Argumente: Zeile (Standard), Zeilen-Umkehr, Spalte, Spaltenresverse.
Rechtfertigungsbekämpfung
Bestimmt, wie der Inhalt auf der Hauptachse auf der aktuellen Linie platziert wird. Optionale Argumente: links, rechts, Mitte, Raumweite, Raumfahrt.
Ausrichtung
Ermittelt die Standardeinstellung, wie Flexelemente auf jeder Zeile auf die Kreuzachse platziert werden.
Ausrichtung
Bestimmt die Standardeinstellung für die Ausrichtung von Kreuzachsen.
Selbst ausrichten
Bestimmt, wie ein einzelnes Element entlang der Kreuzachse platziert wird. Dadurch wird alle Standardeinstellungen überschrieben, die von Align-Items festgelegt wurden.

Richtungen

Cross-Start
Cross-End
Das Cross-Start/Cross-End Seiten bestimmen, wo Flex-Linien mit Flexartikeln von Cross-Start bis Cross-End gefüllt werden.
Hauptstart
Main-End
Das Hauptstart/Main-End Die Seiten bestimmen, wo Sie mit dem Platzieren von Flex-Elementen in den Flex-Behälter beginnen, ab dem Hauptstart-Ende und zum Hauptende-Ende.
Befehl
Platziert Elemente in Gruppen und bestimmt, welche Ordnung sie in den Behälter platzieren sollen.
Flex-Fluss
Kurzschrift Flex-Richtung und Flex-Wrap, um den Flex-Inhalt zu platzieren.

Linien

Linien
Flex-Elemente können entweder auf eine singuläre Linie oder auf mehrere Linien gelegt werden, wie sie durch die Eigenschaft Flex-Wrap-Eigenschaft definiert sind, die sowohl die Richtung der Kreuzachse als auch die Art und Weise stapelt, wie Linien im Behälter stapeln.

Maße

Hauptgröße
Kreuzgröße
Hauptgröße und Kreuzgröße sind die Höhe und Breite des Flexbehälters, jeweils mit den Haupt- bzw. Kreuzachsen.

Verwendungszweck

Bei der Bezeichnung eines Elements als Flexelement muss die CSS-Anzeigeeigenschaft des Elements auf Flex oder Inline-Flex festgelegt werden, wie folgt:

Anzeige: biegen;

Oder:

Anzeige: Inline-Flex;

Durch das Einstellen der Anzeige auf einen der beiden oben genannten Werte wird ein Element zu einem Flexbehälter und seinen Kindern Flex -Elementen. Durch das Einstellen des Displays in Flex wird der Container a Element auf BlockebeneWenn Sie das Display auf Inline-Flex einstellen, macht der Container zu einem Inline-Ebene Element.[4]

Ausrichten in die Mitte

Einer der Vorteile von Flexbox ist die Fähigkeit, Elemente im Container leicht auf die Mitte einer Seite auszurichten, sowohl vertikal als auch horizontal.

Anzeige: biegen; Ausrichtung: Center; Rechtfertigungsbekämpfung: Center;

Verweise

  1. ^ "CSS Flexible Box Layout Modul Level 1 Publication History - W3C". W3c. n.d. Abgerufen 2021-04-08.
  2. ^ a b c d e f g Atkins Jr., Tab; Etemad, Elika J.; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, Hrsg. (2018-11-09). "CSS Flexible Box Layout -Modul Level 1". W3c. Abgerufen 2021-04-08.
  3. ^ a b Atkins JR, Tab; Etemad, Elika J.; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, Hrsg. (2021-03-25). "CSS Flexible Box Layout -Modul Level 1". CSS Working Group Editor Entwürfe. Abgerufen 2021-04-08.
  4. ^ a b "Grundlegende Konzepte von Flexbox". MDN Web Docs. n.d. Abgerufen 2021-04-08.
  5. ^ Bail, Jeff (2012-10-23). "Verwenden Sie CSS -Medienanfragen, um reaktionsschnelle Websites zu erstellen.". IBM -Entwickler. Archiviert von das Original am 2020-10-13. Abgerufen 2021-04-08.
  6. ^ Shepherd, Richard (2011-09-19). "CSS3 Flexible Box -Layout: Alles, was ich mir wünschte, ich wüsste, als ich anfing". Smashing Magazine. Abgerufen 2021-04-08.
  7. ^ Atkins Jr., Tab; Etemad, Elika J.; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil, Hrsg. (2020-12-18). "CSS Grid Layout Modul Level 1". W3c. CSS -Arbeitsgruppe. Abgerufen 2021-04-08.
  8. ^ "CSS Flexible Box -Layout -Modul". Kann ich benutzen. Abgerufen 2020-09-03.