Wordpress horizontales Menü CSS Flexbox. Flexbox für Schnittstellen: Grundmuster. Erstellen eines HTML5-Containers

Kurz gesagt, Layout mit Flexbox gibt uns einfache Lösungen einmal schwierige Aufgaben. Zum Beispiel, wenn Sie ein Element vertikal ausrichten oder die Fußzeile an den unteren Bildschirmrand verschieben oder einfach mehrere Blöcke in einer Reihe einfügen müssen, damit sie den gesamten freien Platz einnehmen. Ähnliche Aufgaben werden ohne Flex gelöst. Aber in der Regel ähneln diese Lösungen eher "Krücken" - Tricks, um CSS für andere Zwecke zu verwenden. Mit flexbox hingegen werden solche Aufgaben genau so gelöst, wie es das flex-Modell vorsieht.

CSS Flexible Box Layout Module (CSS-Modul für Layouts mit flexiblen Blöcken), kurz Flexbox, wurde geschaffen, um die Nachteile bei der Erstellung verschiedenster, auch an unterschiedliche Breiten und Höhen angepasster HTML-Strukturen zu beseitigen und das Layout logisch und einfach zu gestalten . Und der logische Ansatz funktioniert in der Regel an unerwarteten Stellen, an denen das Ergebnis nicht überprüft wurde - die Logik ist unser Alles!

Mit Flexbox können Sie eine Vielzahl von Parametern für Elemente innerhalb eines Containers elegant steuern: Richtung, Reihenfolge, Breite, Höhe, Ausrichtung entlang und quer, Verteilung des freien Raums, Dehnen und Schrumpfen von Elementen.

Grundwissen

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

Um Flexbox zu aktivieren, jeder HTML-Element Es reicht aus, die CSS-Eigenschaft display:flex zuzuweisen; oder display:inline-flex; .

Nach Aktivierung der Flex-Eigenschaft werden im Container zwei Achsen erstellt: Haupt- und Querachse (senkrechte (⊥), Querachse). Alle verschachtelten Elemente (der ersten Ebene) werden entlang der Hauptachse ausgerichtet. Standardmäßig ist die Hauptachse horizontal und hat eine Richtung von links nach rechts (→), und die Querachse ist jeweils 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, von links nach rechts verschoben (→) – also die Achsen einfach vertauscht. In diesem Fall ändern sich Anfang und Ende der Anordnung der Elemente nicht – nur die Richtungen (Achsen) ändern sich! Deshalb müssen Sie an Äxte in einem Container denken. Allerdings sollte man nicht denken, dass es da irgendwelche „physischen“ Achsen gibt und die etwas beeinflussen. Die Achse ist hier nur die Bewegungsrichtung der Elemente innerhalb des Behälters. Wenn wir beispielsweise die Ausrichtung der Elemente zum Mittelpunkt der Hauptachse festgelegt und dann die Richtung dieser Hauptachse geändert haben, ändert sich auch die Ausrichtung: Die Elemente waren horizontal in der Mitte und wurden vertikal in der Mitte. Siehe 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 horizontale Hauptachse und viele Elemente gibt, die nicht in den Container "klettern", also in eine andere Reihe verschoben werden. Diese. der container sieht so aus: ein container, darin sind zwei zeilen, jede zeile hat mehrere elemente. Repräsentiert? Und jetzt denken Sie daran, dass wir nicht nur Elemente, sondern auch Zeilen vertikal ausrichten können! Wie es funktioniert, ist am Beispiel für die . Und so sieht es schematisch aus:

CSS-Eigenschaften, was sich auf das Layout-Gebäudemodell auswirken kann: float , clear , vertical-align , Columns funktionieren nicht in Flex-Konstrukten. Hier wird ein anderes Layoutmodell verwendet und diese CSS-Eigenschaften werden einfach ignoriert.

Flexbox-CSS-Eigenschaften

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

Für Behälter

Anzeige:

Aktiviert die Flex-Eigenschaft für das Element. Das Element selbst und die darin verschachtelten Elemente fallen unter diese Eigenschaft: Nur die Nachkommen der ersten Ebene sind betroffen – sie werden zu Elementen des Flex-Containers.

• biegen- Das Element dehnt sich auf seine volle Breite aus und hat seinen vollen Platz zwischen den umgebenden Blöcken. Am Anfang und am Ende des Blocks gibt es einen Zeilenumbruch.
• inline-flex- Das Element wird von anderen Elementen umschlossen. Gleichzeitig wird sein interner Teil als Blockelement und das Element selbst 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 .

Biegerichtung:

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

• Zeile (Standard)- Richtung der Elemente von links nach rechts (→)
• Säule- Richtung der Elemente von oben nach unten (↓)
• Reihe umgekehrt- Richtung der Elemente von rechts nach links (←)
• Spalte umgekehrt- Richtung der Elemente von unten nach oben ()

Flexfolie:

Steuert das Umschließen von Elementen, die nicht in den Container passen.

• Nowrap (Standard)- Verschachtelte Elemente werden in einer Reihe (mit direction=row) oder in einer Spalte (mit direction=column) angeordnet, unabhängig davon, ob sie in einem Container platziert sind oder nicht.
• wickeln- Beinhaltet die Übertragung von Elementen in die nächste Reihe, wenn sie nicht in den Container passen. Dies ermöglicht die Bewegung von Elementen entlang der Querachse.
• Rückseite wickeln- Dasselbe wie beim Wickeln, nur die Übertragung erfolgt nicht nach unten, sondern nach oben (in die entgegengesetzte Richtung).

Flex-Flow: Richtungswickel

Kombiniert sowohl Biegerichtungs- als auch Biegewickeleigenschaften. Sie werden oft zusammen verwendet, daher wurde die Flex-Flow-Eigenschaft erstellt, um weniger Code zu schreiben.

flex-flow nimmt 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: Zeilenumkehrung; Flex-Flow: Spalte; Flex-Flow: Spalte-umgekehrt; /* nur flex-wrap */ flex-flow: nowrap; Flex-Flow: Wickeln; Flex-Flow: Wrap-Reverse; /* beide Werte auf einmal: flex-direction und flex-wrap */ flex-flow: row nowrap; Flex-Flow: Spaltenumbruch; Flex-Flow: Spalte-umgekehrt Wrap-umgekehrt; Inhalt rechtfertigen:

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

• Flex-Start (Standard)- Elemente werden von Anfang an eingefügt (am Ende kann Platz sein).
• flexibles Ende- Elemente werden am Ende ausgerichtet (die Stelle bleibt am Anfang)
• Center- in der Mitte (der Platz bleibt links und rechts)
• Raum dazwischen- extreme Elemente werden an die Ränder gedrückt (der Abstand zwischen den Elementen wird gleichmäßig verteilt)
• Platz herum- Freiraum ist gleichmäßig zwischen den Elementen verteilt (extreme Elemente werden nicht gegen die Kanten gedrückt). Der Abstand zwischen dem Rand des Containers und den äußersten Elementen ist halb so groß wie der Abstand zwischen den Elementen in der Mitte der Reihe.
• raumgleich

Inhalt ausrichten:

Richtet Zeilen mit Elementen entlang der Querachse aus. Dasselbe wie justify-content, aber für die entgegengesetzte Achse.

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

Diese. if flex-direction: row , dann richtet diese Eigenschaft unsichtbare Zeilen vertikal aus ¦ . Wichtig ist hier zu beachten, dass die Höhe des Blocks starr eingestellt werden muss und größer sein muss als die Höhe der Reihen, sonst strecken die Reihen selbst den Container und jede Ausrichtung von ihnen verliert ihre Bedeutung, da kein Freiraum vorhanden ist dazwischen ... 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 die Ausrichtung der Zeilen macht sofort Sinn ...

• dehnen (Standard)- Die Zeilen werden gedehnt, um die Zeile vollständig auszufüllen
• Flexstart- Die Zeilen werden oben im Container gruppiert (am Ende kann Platz sein).
• flexibles Ende- Zeilen werden am unteren Rand des Containers gruppiert (Platz bleibt am Anfang)
• Center- Zeilen werden in der Mitte des Containers gruppiert (der Platz bleibt an den Rändern)
• Raum dazwischen- die äußersten Reihen werden gegen die Kanten gedrückt (der Abstand zwischen den Reihen ist gleichmäßig verteilt)
• Platz herum- Der Freiraum ist gleichmäßig zwischen den Reihen verteilt (die äußersten Elemente werden nicht gegen die Kanten gedrückt). Der Abstand zwischen dem Rand des Containers und den äußersten Elementen ist halb so groß wie der Abstand zwischen den Elementen in der Mitte der Reihe.
• raumgleich- wie space-around , nur der Abstand der äußersten Elemente zu den Rändern des Containers ist derselbe wie zwischen den Elementen.

Elemente ausrichten:

Richtet die Elemente entlang der Querachse innerhalb einer Reihe aus (unsichtbare Reihe). Diese. die Zeilen selbst werden durch align-content ausgerichtet, und die Elemente innerhalb dieser Zeilen (Zeilen) durch align-items und das alles entlang der Querachse. Es gibt keine solche Trennung entlang der Hauptachse, es gibt kein Zeilenkonzept und Elemente werden mit justify-content ausgerichtet.

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

Für Behälterelemente

Flex-Grow:

Gibt den Faktor an, um das Element zu erhöhen, wenn im Container freier Speicherplatz vorhanden ist. Standard Flex-Grow: 0 d.h. Keines der Elemente sollte wachsen und den freien Raum im Behälter füllen.

Standard-Flex-Grow: 0

• Wenn Sie flex-grow:1 für alle Elemente angeben, werden sie alle auf die gleiche Weise 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 und die Ausrichtung durch justify-content funktioniert nicht mehr: Es gibt keinen freien Platz zum Ausrichten ...
• Mit Flex-Grow:1 . Wenn einer von ihnen flex-grow:2 hat, ist er doppelt so groß wie alle anderen
• Wenn alle Flex-Boxen in einem Flex-Container flex-grow:3 haben, haben sie die gleiche Größe
• Mit Flex-Grow:3 . Wenn einer von ihnen flex-grow:12 hat, ist er viermal größer als alle anderen

Wie es funktioniert? Angenommen, der Container ist 500 Pixel breit und enthält zwei Elemente mit jeweils einer Basisbreite von 100 Pixel. Es bleiben also noch 300 freie Pixel im Container. Wenn wir nun das erste Element auf flex-grow:2; , und der 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 300px freier Platz im Container im Verhältnis 2:1 auf die Elemente verteilt wurden, +200px zum ersten und +100px zum zweiten.

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

Flex-Schrumpf:

Gibt den Reduktionsfaktor für das Element an. 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 arbeiten, wenn die Summe der Größen aller Elemente größer als die Größe des Containers ist.

Standard Flex-Shrink: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. Lassen Sie uns flex-shrink angeben: 2 für das erste Element; , und der zweite Flex-Shrink: 1; . Jetzt reduzieren wir die Breite des Containers um 300px, d.h. Elemente müssen um 300 Pixel verkleinert werden, damit sie in den Container passen. Sie werden im Verhältnis 2:1 komprimiert, d.h. Der erste Block wird um 200 Pixel und der zweite um 100 Pixel verkleinert und die neuen Elementgrößen werden 100 Pixel und 200 Pixel betragen.

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

Flex-Basis:

Legt die Basisbreite des Elements fest – die Breite, bevor alle anderen Bedingungen, die sich auf die Breite des Elements auswirken, berechnet werden. 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 innerhalb des Blocks ab. Mit auto erhält das Element eine Basisbreite relativ zum darin enthaltenen Inhalt.

Standard: automatisch

Manchmal ist es besser, die Breite eines Elements mit der vertrauten Eigenschaft width fest zu codieren. Zum Beispiel Breite: 50 %; bedeutet, dass das Element im Behälter genau 50 % beträgt, die Flex-Grow- und Flex-Shrink-Eigenschaften funktionieren jedoch weiterhin. Dies kann erforderlich sein, wenn das Element durch den darin enthaltenen Inhalt gedehnt wird, mehr als die angegebene Flex-Basis. Beispiel.

Flex-Basis wird "hart", wenn Stretch und Shrink auf Null gesetzt sind: Flex-Basis:200px; Flexwachstum: 0; Flex-Shrink:0; . All dies kann geschrieben werden als flex:0 0 200px; .

flex: (wachsen schrumpfen Basis)

Kurzform der drei Eigenschaften: flex-grow flex-shrink flex-basis .

Voreinstellung: flex: 0 1 auto

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: Inhalt; /* 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 den Ausrichtungselementen des Containers

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

Grundlinie- Das Element wird an der Grundlinie des Textes ausgerichtet

bestellen:

Ermöglicht das Ändern der Reihenfolge (Position, Position) eines Elements in der allgemeinen Zeile.

Standard: Reihenfolge: 0

Elemente haben standardmäßig die Reihenfolge: 0 und werden in der Reihenfolge ihres Erscheinens im HTML-Code und in 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 alle Nullen zuerst gesetzt und dann das Element mit 1.

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

Anmerkungen

Wie unterscheidet sich die Flex-Basis von der 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 (width) und bei flex-direction:column die Höhe (height) steuert. .

Flex-Basis gilt nur für Flex-Artikel. Dies bedeutet, dass diese Eigenschaft keine Auswirkung hat, wenn Sie Flex für den Container deaktivieren.

Absolute Container-Elemente nehmen nicht an Flex-Konstrukten teil... Dies bedeutet, dass Flex-Basis Container-Flex-Elemente nicht beeinflusst, wenn sie absolute Position:absolute sind. Sie müssen eine Breite / Höhe angeben.

• Bei der Verwendung der Eigenschaft flex 3 können die Werte (flex-grow/flex-shrink/flex-basis) kombiniert und kurz geschrieben werden, während für width grow oder schrumpf separat geschrieben werden müssen. Zum Beispiel: flex:0 0 50% == width:50%; Flex-Shrink:0; . Manchmal ist es einfach unbequem.

Wenn möglich, immer noch Flex-Basis bevorzugen. Weite nur verwenden, wenn Flex-Basis nicht passt.

Ist der Unterschied zwischen Flex-Basis und Breite ein Bug oder ein Feature?

Inhalt innerhalb eines Flex-Elements erweitert es und kann nicht darüber hinausgehen. Wenn Sie die Breite jedoch über width oder max-width anstelle von flex-basis festlegen, kann das Element innerhalb des Flex-Containers diesen Container verlassen (manchmal ist dieses Verhalten erforderlich). Beispiel:

Flex-Layout-Beispiele

In den Beispielen werden nirgendwo Präfixe für die Cross-Browser-Kompatibilität verwendet. Ich tat dies für einfaches Lesen von CSS. Siehe daher Beispiele im letzten Chrome-Versionen oder Firefox.

#1 Einfaches Beispiel für vertikale und horizontale Ausrichtung

Fangen wir ganz von vorne an ein einfaches Beispiel- vertikale und horizontale Ausrichtung gleichzeitig und in jeder Höhe des Blocks, auch Gummi.

Oder so, ohne den Block darin:

#1.2 Trennung (Lücke) zwischen Flexblock-Elementen

Um Containerelemente an den Rändern zu positionieren und das Element, nach dem eine Lücke entstehen soll, willkürlich auszuwählen, müssen Sie die Eigenschaft margin-left:auto oder margin-right:auto verwenden.

#2 Responsives 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 auf einem kleinen sollte jedes Element in einer neuen Zeile stehen.

#3 Responsive 3 Spalten

Dieses Beispiel zeigt, wie man schnell und bequem 3 Spalten erstellt, die, wenn sie eingeengt werden, zu 2 und dann zu 1 werden.

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

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

#4 Responsive Blöcke auf Flex

Nehmen wir an, wir müssen 3 Blöcke anzeigen, 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 zu Flex und Übergang

Dieses Beispiel zeigt, wie schnell Sie ein hübsches Akkordeon mit Bildern auf Flex erstellen können. Beachten Sie die Übergangseigenschaft für Flex.

#6 Flex zu Flex (nur ein Beispiel)

Die Aufgabe besteht darin, einen flexiblen Block zu machen. Damit der Textanfang in jedem Block horizontal auf derselben Zeile liegt. Diese. Wenn die Breite schmaler wird, wachsen die Blöcke in die Höhe. Ich möchte, dass das Bild oben ist, die Schaltfläche immer unten und der Text in der Mitte auf einer einzelnen horizontalen Linie beginnt ...

Um dieses Problem zu lösen, werden die Blöcke selbst per Flex gedehnt und auf die maximal mögliche Breite eingestellt. Jeder Innengerät ist ebenfalls ein Flex-Konstrukt, bei dem die Achse flex-direction:column gedreht ist; und das Element in der Mitte (wo sich der Text befindet) wird durch flex-grow:1 gestreckt; um den gesamten freien Platz auszufüllen, damit das Ergebnis erreicht wird - 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-Konstrukte. Einige erfordern immer noch Präfixe. Werfen wir für ein echtes Bild einen Blick auf caniuse.com und sehen Sie, dass 96,3 % der heute verwendeten Browser ohne Präfixe funktionieren, mit 98,3 % Präfixen. Dies ist ein großartiger Indikator für den mutigen Einsatz von Flexbox.

Um zu wissen, welche Präfixe heute (Juni 2019) relevant sind, gebe ich ein Beispiel für alle Flex-Regeln mit notwendige Präfixe:

/* 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:column wrap; flex-flow:column wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-line-pack: verteilen; Inhalt ausrichten: Leerzeichen herum; ) /* Items */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negativ:2; flex-shrink:2; -ms-flex-bevorzugte-größe: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.
Es gibt in dieser Liste keine für heute unnötigen Präfixe (laut caniuse), aber im Allgemeinen gibt es mehr Präfixe.

Chrom	Safari	Feuerfuchs	Oper	IE	Android	iOS
20-(alt)	3.1+ (alt)	2-21 (alt)		10 (Tweener)	2.1+ (alt)	3.2+ (alt)
21+ (neu)	6.1+ (neu)	22+ (neu)	12.1+ (neu)	11+ (neu)	4.4+ (neu)	7.1+ (neu)

• (neu) - neue Syntax: display: flex; .
• (Tweener) - alte inoffizielle Syntax von 2011: Anzeige: Flexbox; .
• (alt) - alte Syntax von 2009: display: box;

Video

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

Nützliche Flex-Links

flexboxfroggy.com - Flexbox-Lernspiel.

Flexplorer ist ein visueller Flexcode-Konstruktor.

In diesem Beitrag möchte ich eine Möglichkeit zeigen, ein responsives horizontales Menü mit Flexbox zu implementieren. Diese Methode Die Implementierung des Menüs wird auf der Warface-Hub-Website verwendet, jedoch mit einer etwas anderen Struktur und verwendet um mehr Pfeifen.

Vor ungefähr einem Jahr bin ich in ein Unternehmen eingestiegen, in dem mir ein wunderbarer Satz gesagt wurde: „Erst machen wir alles mit mit CSS, und fügen Sie dann einfach das JavaScript hinzu." Der Rat scheint gut zu sein, und ich habe ihn befolgt. Aber wie es passiert, wurde ich mitgerissen. Jetzt ist mir wieder eingefallen, dass nicht alles mit diesem Ansatz gemacht werden muss.

Und so, mehr auf den Punkt. Ich begann zu studieren und umzusetzen.

Ziele

1. Grundkenntnisse im Umgang mit Flexbox-Eigenschaften erwerben;
2. ein horizontales adaptives Menü entwickeln;
3. die resultierende Lösung im Projekt anzuwenden.

Werkzeuge und Dokumentation

1. NPM - als Paketmanager (wechselt jetzt aktiv zu Yarn)
2. Grunt ist ein Tool, mit dem Sie Ihr Projekt erstellen können.
3. Flexbox-Dokumentation (siehe Nützliche Links);

Sie können Ihre Werkzeugkiste verwenden

Struktur

Um die Stilstruktur für das Menü zu organisieren, habe ich das beschriebene Konzept verwendet. Der Autor dieses Konzepts schlägt vor, alle Stilbeschreibungen in mehrere Teile zu zerlegen:

• Layout– beschreibt die Position von Komponenten und Elementen auf der Seite;
• Komponente- beschreibt die Anzeige und das Verhalten der Elemente, die in der Komponente enthalten sind;
• Element– beschreibt die Anzeige und das Verhalten eines einzelnen Elements;

Mein Verständnis des Konzepts führte mich also zu dieser Struktur:

• Base- Beschreibung von Konstanten, Grundstilen (wie in normalize.css)
• Komponente- Beschreibung der Anwendungskomponenten. In unserem Fall die Komponente "Menü".
• Element- Beschreibung von Stilen für Elemente wie Schaltflächen, Links usw.
• Layout- Beschreibung der Position der Blöcke auf der Seite
• style.scss- in dieser Datei sammeln wir alles zusammen

CSS- und HTML-Eingabe- und Label-Tags

Bevor wir mit dem Zeichnen des HTML-Markups beginnen, möchte ich an einige interessante CSS-Selektorverhalten erinnern/zeigen, die sich als nützlich erweisen werden.

Text 1 Text 1
BEI dieses Beispiel Möglicherweise stellen Sie fest, dass Sie die ausgewählte Eingabe erhalten, wenn Sie auf das Label klicken. Daran ist nichts Besonderes (siehe ), aber das Interessanteste kommt von der Seite der CSS-Selektoren.

Input:markiert ( Rahmenfarbe: rot; )
Dieser CSS-Selektor wird nur verarbeitet, wenn die Eingabe ausgewählt ist (siehe :checked)

Die zweite Sache, auf die man bei CSS-Selektoren achten sollte, ist die Auswahl des nächsten Elements (siehe Benachbarte Geschwisterselektoren und Allgemeine Geschwisterselektoren). Das heißt, wir können das nächste Element nach dem aktuellen auswählen.

Input:markiert + .label ( Farbe: rot; )
In diesem Beispiel haben wir folgendes Verhalten: Wenn ein Element mit der Eingabeklasse ausgewählt wird, wird das nächste Element mit der Beschriftungsklasse gemäß den beschriebenen Stilen geändert.

Jetzt ist alles zusammengebaut.

Menüstruktur mit einem Punkt

In diesem Beispiel habe ich einige Eingabe- und Beschriftungselemente hinzugefügt, um das folgende Verhalten zu erreichen:

1. Jedes name=menu-item-trigger-Element, mit Ausnahme des ersten, im :checked-Zustand ändert die Sichtbarkeit und Position nachfolgender label.menu-item-close- und div.menu-sub-Elemente, sodass das label.menu-item -close-Element wird vollständig mit dem label.menu-item-label-Element überlagert, und das div.menu-sub-Element wurde unterhalb des label.menu-item-label-Elements gerendert. Das heißt, wir öffnen ein Untermenü und ändern das Verhalten beim Klicken auf das Hauptmenü;
2. Das erste Element name=menu-item-trigger wird nur verwendet, um alle vorgenommenen Änderungen im vorherigen Absatz rückgängig zu machen, d. h. das Untermenü zu schließen;

Kein Menüpunkt ausgewählt:

Ein Menüpunkt ausgewählt:

Nach solchen Manipulationen müssen nur noch die Eingabeelemente ausgeblendet werden.

Flexbox

Jetzt müssen wir Stile hinzufügen dieses Menü gut angezeigt bei verschiedenen Auflösungen und verschiedene Browser. Im Moment haben wir unsere Bemühungen darauf konzentriert, die Browser zu unterstützen, die von Besuchern unserer Ressource am häufigsten verwendet werden. Das Ergebnis ist eine kleine Liste: Chrome, Firefox, IE Edge, IE 11 und deren mobile Versionen letzte Version.

Unterstützung wird bereitgestellt, indem Präfixe (postcss) hinzugefügt und Stile für einen bestimmten Browser separat geschrieben werden.

Reaktionsfähigkeit in Flexbox ist sehr einfach zu erreichen. Es reicht aus, den Container zu beschreiben, aber manchmal ist es notwendig, Probleme mit dem darin enthaltenen Inhalt zu lösen. Zum Beispiel:

• Menüpunkte mit langen Wörtern, wie "Knowledge Base" und seine deutsche Übersetzung "Wissensdatenbank". In diesem Fall wird dem Text ein Umbruchelement hinzugefügt, auf das die folgenden Stile angewendet werden:

  Label-Text ( // @link: http://htmlbook.ru/css/text-overflow overflow: hidden; text-overflow: ellipse; width: 100%; display: inline-block; )

• Bilder die in der Breite gedehnt werden müssen, aber bei Einstellung Breite: 100%; sie kriechen aus dem übergeordneten Block heraus. Hier ist box-sizing: border-box; für dieses Element;
• Es kann auch Probleme geben, dass untergeordnete Elemente nicht die gesamte mögliche Länge einnehmen oder nicht gleichmäßig verteilt sind. Hier könnte flex: 1 1 auto helfen.

In diesem Beispiel wird der Elementcontainer wie folgt beschrieben:

Menü ( display: flex; align-items: center; flex-wrap: wrap; )
Für jedes Element im Container müssen Sie es so gestalten, dass es den gesamten möglichen Raum ausfüllt und den Inhalt in sich selbst vertikal in der Mitte ausrichtet:

Menüpunkt ( flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; )

Eine schönere Menüdarstellung kann mit erreicht werden

In dieser Version werden wir horizontaler Menüeffekt auf schweben. Lassen Sie uns eine Verbindung zu Schriftsymbolen herstellen, den Ebenenüberblendungsmodus mit mix-blend-mode: multiply aktivieren, :hover -Pseudoklassen verwenden und uns mit desplay:flax vertraut machen, alles in reinem CSS3 .

Menürahmen in HTML

Laden Sie das Archiv auf Ihren Computer herunter und entpacken Sie es. Es enthält drei Ordner, css, wo sich die Stildateien befinden, fonts ist ein Ordner mit Symbolen, img darin ist ein Hintergrundbild.

Übertragen Sie alles in Ihre Entwicklungsumgebung, in der Sie arbeiten. Ich werde den gesamten Code in phpstorm schreiben. Ich kopiere alle Ordner und Dateien hinein, öffne index.html und fahre fort, den Menürahmen zu beschreiben.

Body-Tag schreiben

, darin schreiben wir ein div mit der .dws-menu-Klasse, dann ul mit der .dws-ul-Klasse, dann fünf li-Listen mit der .dws-li-Klasse. Setze einen Link in die Listen, dann klicke ich mit der .fa-Klasse und der fa-Klasse, wo wir die Namen der Icons schreiben, dann das Attribut aria-hidden=“true“ an, klicke auf Apply.

Div.dws-Menü>ul.dws-ul>li.dws-li*5>a>i.fa.fa-

Symbolname:

• Einkaufswagen
• Server
• Ordner geöffnet
• Zeitung-o

• Heimat
• Punktzahl
• Dienstleistungen
• Portfolio
• Nachrichten

CSS gestalten

Sobald wir das Markup erstellt haben, fahren wir mit dem Styling fort. Öffnen Sie style.css im Textkörper und legen Sie den Hintergrund und die Schriftart Verdana fest.

Body( Hintergrundbild: url(../img/escheresque_ste.png"); Schriftfamilie: Verdana; )

Wir legen den Hintergrund für den Block mit dem Menü fest und machen von oben Einzüge von 100 Spitzen. und volle Bildschirmbreite.

Dws-Menü (Hintergrundfarbe: weiß; Rand oben: 100px; Breite: 100%; )

In Ul-Blöcken richten wir die Listen horizontal mit desplay:flax aus, entfernen die Polsterung und zentrieren unsere Elemente mit justify-content:center .

Ul.dws-ul( display: flex; padding: 0; justify-content: center; )

Wir entfernen die Markierung aus den LI-Listen und rücken von allen Seiten um 10 Pik ein.

Li.dws-li ( Listenstil: keiner; Polsterung: 10px; )

Wir entfernen die Unterstreichung von den Links, erhöhen den Text auf 18 Spitzen. und mach es schwarz.

Li.dws-li a( Textdekoration: keine; Schriftgröße: 18px; Farbe: #000; )

Bewegen Sie das Symbol mit margin-right:10px leicht nach rechts.

Li.dws-li a i( Rand rechts: 10px; )

Animation beim Schweben

Nachdem wir das grundlegende Design erstellt haben, beginnen wir mit der Animation beim Hover.

Lassen Sie uns zusätzliche Pseudoelemente erstellen, die den Namen des Elements unterstreichen, wenn Sie darüber schweben.

Lassen Sie uns die linke Seite beschreiben, wählen Sie die Links aus und weisen Sie ihnen ein Pseudo-Element zu li.dws-li a::before , schreiben Sie einen leeren Inhalt:''; , 20 pic breit. und eine Höhe von 3 Pik. genügend. Lassen Sie uns die Farbe einstellen und damit der Block erscheint, weisen Sie die Position des Links zu: relative; , und positioniere ihn absolut zu den Links, schiebe ihn ganz nach unten, drücke ihn an den linken Rand.

li.dws-li a( ... Position: relativ; ) li.dws-li a::before( ... Position: absolut; oben: 100%; links: 0; )

Duplizieren Sie diesen Block und weisen Sie ihm das Pseudo-Element ::after zu. Ändere den Parameter von links nach rechts, wähle eine andere Farbe #ff2117.

Li.dws-li a::after( content: ""; width: 20px; height: 3px; background-color: #ff2117; position: absolute; top: 100%; right: 0; )

Dann machen wir die Animation auf Hover. Wählen Sie li aus und geben Sie ihnen einen etwas dunkleren Hintergrund.

Li.dws-li:hover( Hintergrundfarbe: #e5eae8; )

Dazu selektieren wir die Listen beim Hover und fügen ihnen ein Pseudo-Element mit einer Breite von 50% hinzu und stellen die Transformation entlang der X-Achse von links nach rechts ein. Das gibt ihr Bewegung.

Li.dws-li:hover a:before( width: 50%; transform: translateX(100%); )

Dasselbe wiederholen wir für das Pseudo-Element ::after, nur dass wir jetzt die Bewegung von rechts nach links einstellen.

Li.dws-li:hover a:after( width: 50%; transform: translateX(-100%); )

li.dws-li a::before( ... Übergang: .5s; Mix-Mischmodus: multiplizieren; ) li.dws-li a::after( ... Übergang: .5s; Mix-Mischmodus : multiplizieren; )

Es ist ziemlich gut geworden, jetzt setzen wir die Breite auf Null und fügen rote Farbe hinzu, wenn wir den Link bewegen.

Li.dws-li a:hover( Farbe: #e62117; )

li.dws-li a( ... padding: 5px; ) li.dws-li a::before( ... top: 90%; ) li.dws-li a::after( ... top: 90 %; )

Im Prinzip habe ich euch gezeigt, was ich wollte, es ist ein ziemlich schönes Menü geworden.

Die Lektion wurde von Gorelov Denis vorbereitet.

In diesem Artikel möchten wir uns die Verwendung von Flexbox in CSS3 als eine der fortgeschrittenen Möglichkeiten zum Erzielen von Responsiveness auf einer Website genauer ansehen.

Bei CSS erstellen Die Komplexität der Layouts war nicht das, was sie heute ist. Früher hatten Layouts eine feste Breite und kleine Variationen in der Blockplatzierung, aber heute können Website-Layouts fast jede Form annehmen. All dies zwingt Entwickler, sich CSS-Hacks auszudenken, damit der Inhalt mehr oder weniger korrekt angezeigt wird.

Flexbox (flexible Boxen) ist relativ neuer Modus Markup in CSS3 zur Verbesserung der Ausrichtung, Richtung und Reihenfolge von Elementen in einem Container, selbst wenn dieser dynamisch ist oder unbekannte Abmessungen hat. Das ist das meiste wichtiges Merkmal- die Möglichkeit, die Breite oder Höhe der untergeordneten Elemente im Block zu ändern, um den verfügbaren Platz bei verschiedenen Bildschirmgrößen optimal auszufüllen.

Was ist FlexBox?

Flexbox ist ein Layoutmodus, mit dem Elemente auf einer Seite so angeordnet werden können, dass sie sich vorhersehbar verhalten, wenn die Seite auf unterschiedliche Bildschirmgrößen und Geräte reagiert.

Verwenden Flexbox, können der Container und seine Kinder in jede Richtung positioniert werden: links, rechts und sogar oben oder unten. Sie können die gewünschte Reihenfolge der Elemente auf der Seite auswählen und anordnen, den Inhalt mit einer einzigen Eigenschaft von rechts nach links ausrichten und sogar eine beliebige Anzahl von Spalten zum Seitenlayout Ihrer Website hinzufügen. Die Größe der Blöcke ist ebenfalls flexibel, da Elemente wachsen können, um ungenutzten Platz einzunehmen, oder schrumpfen können, um ein Überlaufen zu verhindern.

Auf der dieser Moment Flexbox wird von fast allen modernen Browsern unterstützt, einschließlich Android und iOS.

Wann Flexbox für Layouts verwendet werden sollte

In einem der vorherigen Artikel haben wir über eine Methode für responsives Design geschrieben. Obwohl es technisch möglich ist, mit Flexbox ein komplettes Layout für eine Website zu erstellen, ist es nicht nur für diesen Zweck gedacht. Vielmehr ist es besser geeignet, einzelne Container wie den Hauptinhaltscontainer zu stylen, Seitenverkleidung(Seitenleiste), Kopfzeile und andere ähnliche Abschnitte. Dennoch sind Gitter besser geeignet, um das gesamte Layout zu erstellen.

Der Unterschied liegt im Wie Flexbox interagiert mit Browsern, die die Seite schrittweise laden. Zunächst wird der Inhalt horizontal gestreckt, um den gesamten Bildschirm auszufüllen. Wenn alle anderen Container geladen werden, passt sich die horizontale Anzeige dynamisch an und schrumpft, um die gesamte Breite des Bildschirms auszufüllen, um die umgebenden Elemente einzuschließen.

Mit anderen Worten, der Benutzer sieht für den Bruchteil einer Sekunde ein völlig anderes Layout als geplant. Aber nachdem die Seite vollständig geladen ist, richtet sich natürlich alles aus.

Container, Kinder und Flex

Bevor wir mit dem Schreiben von CSS-Code mit Flexbox beginnen, müssen Sie sich zunächst mit einigen wichtigen Konzepten vertraut machen:

• flexbox - der Behälter wird Flexbox nachdem die Eigenschaft display mit einem Wert von flex oder inline-flex verbunden wurde
• flex item - untergeordnetes Element in Flexbox
• Hauptachse - Dies ist die Hauptachse, entlang der die Elemente ausgerichtet sind
• Querachse - eine Achse senkrecht zur Hauptachse. Auch Kreuzachse genannt
• Hauptstart/Hauptende (Hauptstart/Hauptende) – Flex-Elemente werden in einem Container platziert, der an der Seite des Hauptstarts beginnt und zum Hauptende hin endet
• Querstart und -ende (Querstart/-ende) – Flexleitungen werden mit Elementen (Elementen) gefüllt und in einem Container platziert, der an der Seite des Querstarts des Flexcontainers beginnt und bis zum Querende reicht
• Hauptgrößeneigenschaft - die Breite oder Höhe des Flex-Elements, je nachdem, was in der Hauptdimension der Hauptachse enthalten ist, ist die Hauptgröße des Elements. Die Hauptgrößeneigenschaft eines Flex-Elements ist entweder die Breiten- oder die Höheneigenschaft, je nachdem, was in der Hauptdimension liegt
• Quergrößeneigenschaft - die Breite oder Höhe des Flex-Elements, je nachdem, was in der Querachsendimension liegt, ist die Quergröße des Elements. Die Querbemaßungseigenschaft hängt von der Breite oder Höhe ab, die in der Querbemaßung enthalten ist

Es gibt bestimmte Eigenschaften in CSS, die nicht von der Eigenschaft flexbox betroffen sind, da sie keine eigentlichen Container-Boxen erstellen:

Column-* float clear vertical-align::first-line und::first-letter

Erstellen eines HTML5-Containers

Jetzt können wir mit dem Erstellen des Layouts mit Flexbox beginnen. Erstellen Sie dazu das Rückgrat einer HTML-Seite (oder in PHP, wenn Sie ein CMS verwenden).

Erstellen Sie ein übergeordnetes Container-Div im Körper:

Innerhalb dieses Containers können Sie beliebige Inhalte hinzufügen.

Als Test erstelle ich drei Blöcke mit einigen Informationen und einen Block mit dem Hauptinhalt darunter.

Informationsblock Nr. 1

Informationsblock Nr. 2

Informationsblock Nr. 3

Hier ist der Hauptinhalt.

Um diesem Grundgerüst etwas Farbe zu verleihen, fügen wir nun ein paar grundlegende CSS-Stile hinzu (Sie können dies mit einem separaten Plugin tun). CSS-Datei Styles oder schließen Sie diese Styles in das Tag ein im Kopfteil).

Erstellen und Gestalten von Flexbox

Erschaffen Flexbox, müssen wir eine Anzeigeeigenschaft für definieren gewünschten Behälter. In unserem Beispiel ist dies die Eigenschaft für das übergeordnete Element:

Inhalt ( Anzeige: Flex; )

Dieser Schritt erstellt eine Flexbox auf Blockebene. Alternativ (wenn Sie Inline-Stile anwenden möchten) können Sie inline-flex anstelle von flex verwenden.

Lassen Sie uns nun etwas CSS-Styling hinzufügen, um unsere neu erstellte Flexbox zu testen.

Stile für Reaktionsfähigkeit

Es gibt viele Eigenschaften, die wir auf Flexbox aktivieren können, um ein ansprechendes Layout zu erstellen.

Um Flex-Elemente in der richtigen Reihenfolge zu platzieren, fügen Sie einfach die Order-Eigenschaft und die Abkürzung für die Flex-Eigenschaft hinzu.

Blok (Reihenfolge: 1; Flex: 1 1 30%; ) Artikel (Reihenfolge: 2; Flex: 1 1 Auto; )

All dies mag zunächst etwas schwierig erscheinen, aber Übung wird alles an seinen Platz bringen.

Der order-Eigenschaft wird eine Zahl übergeben, die dem Browser mitteilt, welches Flex-Element vor den anderen angezeigt werden soll. Bei Bestellnummer 1 wird zuerst das Flex-Element angezeigt. Für 2 - die zweite, für 3 - die dritte und so weiter.

Sie können auch negative Zahlen verwenden. Wenn Sie während des Layouts plötzlich feststellen, dass Sie ein Flex-Element vor dem ersten bereits platzierten Element hinzufügen müssen, können Sie die order-Eigenschaft des neuen Flex-Elements auf -1 setzen; .

Die Flex-Kurzschrift besteht aus drei Eigenschaften:

• flex-grow - bestimmt, wie viel freien Platz der Container im Verhältnis zu anderen Containern einnehmen kann. Es kann nur eine positive Zahl sein
• flex-shrink ist eine Eigenschaft, die den Schrumpffaktor des Flex-Elements angibt. Flex-Elemente füllen den Container um den Wert von flex-shrink, wenn die Standardbreite von Flex-Elementen breiter als der Flex-Container ist. Negative Zahlen haben keine Auswirkung
• flex-basis – Die Anfangsgröße eines Flex-Elements, bevor Flex-Größen angewendet werden und bevor freier Speicherplatz belegt wird oder nicht genügend Speicherplatz vorhanden ist. Kann in Pixel oder Prozent angegeben werden

Einige Erläuterungen bzgl kurzer Eintrag Eigenschaften:

• flex: initial oder flex: 0 1 auto – diese Einstellung macht die Größe des Flex-Elements relativ zum darin enthaltenen Inhalt. Es steigt, wenn viel Inhalt vorhanden ist, und schrumpft, wenn nicht viel Inhalt vorhanden ist.
• flex: auto oder flex: 1 1 auto – bei beiden Optionen kann das Flex-Element nach Bedarf schrumpfen und wachsen, um sich jeder Bildschirmgröße anzupassen.
• flex: none oder flex: 0 0 auto – dies deaktiviert die Größenflexibilität und legt die Größe des Flex-Elements fest und ist für den Benutzer bei keiner Bildschirmgröße einstellbar.
• Relative Flexgröße mit Flex: 1 % px . Eine positive Zahl legt zunächst die Menge an freiem Speicherplatz fest, die ein Flex-Element relativ zu anderen Flex-Elementen einnimmt. Mit der zweiten Zahl können Sie das Element auf kleineren Bildschirmen verkleinern. Der dritte Wert in Pixel (oder Prozent) legt die Anfangsgröße des Flex-Elements fest, aber beachten Sie, dass dieser Wert auch die Flex-Basis-Eigenschaft deaktiviert, was bedeutet, dass diese Anfangsgröße nicht garantiert ist. Wenn genügend Platz vorhanden ist, um diese Anfangsgröße anzuzeigen, wird sie angezeigt, wenn jedoch nicht genügend Platz vorhanden ist, wird sie nicht angezeigt. Dies gilt insbesondere, wenn die Anzeigereihenfolge des Elements weiter unten in der Liste steht und andere vorherige Elemente weiter oben in der Reihenfolge den größten Platz einnehmen. Ein Beispiel für diese Einstellung wäre flex: 2 1 0% .

Damit diese Optionen funktionieren, müssen Sie zuerst die Größe der Flexbox mit einer Höhe und Breite festlegen.

Basierend auf dem obigen CSS-Stilbeispiel könnten sie so aussehen: CSS-Stile für Flexbox mit zusätzlicher Größe:

Inhalt ( Anzeige: Flex; Breite: 75 %; Höhe: 450 Pixel; )

Bei diesen Stilen werden alle Flex-Elemente im Beispiel in derselben Zeile angezeigt. Da ich die Flex-Elemente in einer Zeile und den Hauptinhalt darunter anzeigen möchte, muss ich die Flex-Flow-Eigenschaft hinzufügen und ihren Wert festlegen, um den Inhalt in Zeilen einzuschließen.

Um dieses Setup vorzunehmen, muss ich diese Eigenschaft zum Flexbox-Container hinzufügen:

Inhalt ( display: flex; flex-flow: row wrap; /* Flex-Items füllen eine Zeile (Zeile) */ width: 75%; height: 450px; )

Wenn ein oder mehrere Flex-Elemente die volle Länge der Flexbox einnehmen, werden die restlichen Flex-Elemente danach auf eine neue Linie verschoben.

Um nun mehr oder weniger zu verstehen, wo sich ein Block befindet und welche Abmessungen er hat, fügen wir ein paar zusätzliche Stile hinzu. Außerdem haben wir den gesamten Textinhalt in ein p-Tag eingeschlossen und diesem Tag einige Stile hinzugefügt:

Informationsblock Nr. 1

Informationsblock Nr. 2

Informationsblock Nr. 3

Hier ist der Hauptinhalt.

CSS-Stile:

Inhalt ( Anzeige: Flex; Flex-Flow: Zeilenumbruch; /* Flex-Elemente füllen die Zeile (Zeile) */ Breite: 75 %; Höhe: 450 Pixel; Rand: Auto; Hintergrundfarbe: #333; ) .blok ( order : 1; Flex: 1 1 30%; Hintergrundfarbe: #ccc; Rand: 5px; ) Artikel (Reihenfolge: 2; Flex: 1 1 Auto; Hintergrundfarbe: #bbb; Rand: 5px solid #333; Polsterung: 7px; ) p ( Farbe: #fff; Polsterung: 15px; Schriftgröße: 22px; )

Und vergessen Sie nicht, dass Flexbox nicht richtig funktioniert, wenn Sie sich entscheiden, Flexbox oder Flex-Elementen eine Eigenschaft min-width hinzuzufügen. Außerdem ist es für die Reaktionsfähigkeit des Designs besser, die Breite des Hauptcontainers in Prozenten zu verwenden. Wenn Sie feste Pixelwerte festlegen, funktioniert die Reaktionsfähigkeit für kleine Bildschirme nicht.

Unten ist eine Demo des Endergebnisses:

Versuchen Sie, mit verschiedenen Stilen herumzuspielen, um besser zu verstehen, wie Flexbox in der Praxis funktioniert.