CSS Flexbox Layout -Modell | Erklärt
Diese Beschreibung unterstützt Sie in den folgenden Aspekten des CSS Flexbox-Modells:
- Was ist CSS Flexbox -Layout -Modell
- Was ist ein CSS -Flex -Behälter
- Funktionen des Flexbox -Modells
- Grundlegendes Konzept des CSS -Flexbox -Layoutmodells
- Flexbox -Eigenschaften
- Beispiele
Also beginnen wir beginnen!
Was ist CSS Flexbox -Layout -Modell
Es ist ein flexibles Layout -Modul, das in CSS3 erhältlich ist, das eine einfache und klare Möglichkeit bietet, Flexelemente in einem Behälter anzuordnen. Es hilft uns bei der Gestaltung des reaktionsschnellen Layouts.
Was ist ein CSS -Flex -Behälter
Um mit dem Flexbox-Modell zu arbeiten, müssen wir zunächst verstehen, was ein Flex-Behälter ist, und um dies zu tun, betrachten wir die untergegebene Abbildung:
Im obigen Snippet repräsentiert der Graubereich einen Flex -Behälter, während Punkt 1, Punkt 2 usw. usw. sind seine Artikel. Wir können also sagen, dass der Flex -Behälter ein Box/Container ist, der mehrere Flex -Elemente enthalten kann.
Funktionen des Flexbox -Modells
Das CSS Flexbox -Layout -Modell bietet zahlreiche Funktionen, von denen einige unten aufgeführt sind:
- Im CSS -Flexbox -Layout -Modell gibt es keine Schwimmer.
- CSS Flexbox bietet ein reaktionsschnelles und mobilfreundliches Layout.
- Die Ränder des Flex -Behälters kollabieren nicht mit den Rändern seines Inhalts.
- Die Positionierung des untergeordneten Elements ist im Flexbox -Modell sehr einfach.
- Die Bestellung des Elements kann leicht geändert werden, ohne die Quelle HTML zu bearbeiten.
Grundlegendes Konzept des CSS -Flexbox -Layoutmodells
Einige der grundlegenden Konzepte des CSS -Flexbox -Layout -Modells sind unten aufgeführt:
- Das CSS -Flexbox -Modell kann die Höhe und Breite des Elements auf die beste Passform in den verfügbaren freien Speicherplatz des Containers ändern.
- Flexbox ist Richtung-Agnostiker, was bedeutet, dass Elemente der Flexbox je nach Anforderungen sowohl horizontal als auch vertikal angeordnet werden können.
Flexbox -Eigenschaften
Um ein reaktionsschnelles Layout zu entwerfen, ist in CSS3 eine Vielzahl von Flex-Eigenschaften erhältlich, wie in den untergegebenen Tabellen beschrieben:
Tabelle 1
| Eigenschaften | Beschreibung |
|---|---|
| Anzeige | Bestimmt die Art des Flex -Containers, i.e., Inline, Block. |
| Flex-Richtung | Gibt die Richtung von Elementen im Container wie Top-Bottom, Links-Rechts usw. an. |
| Flex-Wrap | Bestimmt, ob die Elemente verpackt werden sollen oder nicht. |
| Flex-Fluss | Bietet die Funktionen sowohl der Flex-Wrap- als auch der Flex-Richtung. |
| Rechtfertigungsbekämpfung | Es richtet die Elemente/Elemente entlang der Hauptachse aus. |
| Ausrichtung | Es richtet die Elemente entlang der Kreuzachse aus. |
| Ausrichtung | Es richtet die Linien des Flexbehälters aus. |
| Lücke | Steuert die Räume zwischen den Flex -Elementen explizit. |
Tabelle 2
| Eigenschaften | Beschreibung |
|---|---|
| Befehl | Es kontrolliert die Reihenfolge der Kinderelemente im Flex -Behälter. |
| Flex-Anbaus | Es bestimmt den Wachstumsfaktor für einen Flex -Element. |
| Flex-Shrink | Es bestimmt den Schrumpffaktor für Kinderelemente/Flex -Elemente. |
| Flex-Base | Es bestimmt die Standardgröße des untergeordneten Elements/Flex -Elements. |
| biegen | Es wird verwendet, um die Funktionen von drei Eigenschaften zu erreichen i.e. Flex-Flex-, Flex-Shrink- und Flex-Base. |
| selbst ausrichten | Es ermöglicht die Standardausrichtung (entlang der Querachse), die für einzelne untergeordnete Elemente überschrieben werden kann. |
Die in Tabelle 1 beschriebenen Eigenschaften sind als bekannt als Flex -Behälter oder übergeordnetes Element Eigenschaften, während die in Tabelle 2 beschriebenen als bekannt sind als Flex Artikel oder Kinderelement Eigenschaften.
Beispiele
In diesem Abschnitt werden wir die oben beschriebenen Eigenschaften von FlexBox-Container und Flexbox-Elementen praktisch implementieren.
Flexbox -Beispiel
Erster Gegenstand
Zweiter Artikel
Dritter Artikel
Vierter Artikel
Fünfter Artikel
Im obigen Code-Snippet verwendeten wir verschiedene Eigenschaften des Flex-Container- und Flex-Elements wie Anzeige, Flex-Richtung, Ausrichtung, Lücke und Flex-Anbaus, die die Flex-Anzeige, die REVERSWISSEN-RICHTIGKEIT, die Dehnten Ausrichtung, 5PX-Zeilen und die Zeilen und die Zeilen von 5px festlegen, und die Zeilen und Flex-Display einstellen 50px -Spalten spalten sich und das dritte Element wächst zweimal schneller als andere Elemente:
Die Ausgabe überprüft die Arbeit von CSS Flexbox -Eigenschaften.
Abschluss
Das CSS -Flexbox -Modell bietet eine einfache und saubere Möglichkeit, Flexbox -Elemente in einem Container anzuordnen. Es bietet zahlreiche Funktionen wie reaktionsschnelles Design, einfache Ausrichtung von Elementen usw. Darüber hinaus können zahlreiche Eigenschaften verwendet werden, um die Elemente besser zu entwerfen und auszurichten, wie z. In diesem Artikel wurde das Flexbox -Layoutmodell, Flex -Container und deren Eigenschaften erörtert.