Flexbox Elements Eigenschaften in CSS | Erklärt
Mit diesem Bericht können Sie die folgenden Aspekte der CSS-Flexbox-Elemente verstehen:
- Flexbox -Elemente in CSS
- Flexbox -Elemente Eigenschaften in CSS
- So implementieren Sie Flexbox -Elemente Eigenschaften in CSS
Also beginnen wir beginnen!
Flexbox -Elemente in CSS
Während wir den Flex -Container in der Flexbox erstellen, verwenden wir die Anzeigeeigenschaft und weisen ihm einen gewissen Wert zu, wie z. B. Flex, Inline. Zu diesem Zeitpunkt wird das direkte Kind dieses Flex -Containers zum Flex -Element. Die unten angegebene Abbildung bietet ein besseres Verständnis:
Flexbox -Elemente Eigenschaften in CSS
Die folgende Tabelle bietet Ihnen einen kurzen Überblick über Flexbox -Eigenschaften:
| 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 ein untergeordnetes Element/Flex -Element. |
| Flex-Base | Es bestimmt die anfängliche Größe eines untergeordneten Elements/Flex -Elements. |
| biegen | Es ist eine Kurzeigeneigenschaft für drei Immobilien Flex-Flex-Flex-, Flex-Shrink- und Flex-Base. |
| selbst ausrichten | Es ermöglicht die Standardausrichtung (entlang der Querachse), die für einzelne Elemente des untergeordneten Elements/Flexe überschrieben werden kann. |
So implementieren Sie Flexbox -Elemente Eigenschaften in CSS
In diesem Abschnitt werden wir jede oben erwähnte Flexbox -Eigenschaft diskutieren und praktisch für ein tiefgreifendes Verständnis umsetzen:
Beispiel 1: CSS -Bestellbesitz
Es braucht einen numerischen Wert, um die Elemente in einer bestimmten Reihenfolge zu sortieren. Mit dem folgenden Code -Snippet können Sie verstehen, wie die Auftragseigenschaft in einer Flexbox funktioniert:
Eigenschaft bestellen
Erster Gegenstand
Zweiter Artikel
Dritter Artikel
Vierter Artikel
Fünfter Artikel
Im obigen Code -Snippet haben wir die Auftragseigenschaft verwendet, um die Flexbox -Elemente gemäß unserer Wahl zu arrangieren:
Die Ausgabe zeigt, dass die Ordereigenschaft die Flex-Elemente gemäß der benutzerdefinierten Bestellung angeordnet hat.
Beispiel 2: CSS Flex-Flex-Flex-Immobilie
Es erfordert einen numerischen Wert, der darstellt. Für die Klarheit der Konzepte betrachten wir den folgenden Code:
Flex-Flow-Eigenschaft
Erster Gegenstand
Zweiter Artikel
Dritter Artikel
Vierter Artikel
Fünfter Artikel
In diesem Beispiel beträgt der Standardwert für die Eigenschaft Flex-Grow-Eigenschaft 0. Die zweite und vierte Elemente des Containers wachsen jedoch schneller als andere Elemente, da diese beiden Elemente den Wert der Flex-Anbaus-Eigenschaft als 12 angegeben haben:
Der obige Ausschnitt überprüfte die Arbeit von Flex-Flex-Immobilien.
Beispiel 3: CSS Flex-Basis-Eigenschaft
Im folgenden Code-Snippet werden wir die Eigenschaft Flex-Basis implementieren, um die Größe der zweiten und vierten Elemente des Containers festzulegen:
Flex-Base-Eigenschaft
Erster Gegenstand
Zweiter Artikel
Dritter Artikel
Vierter Artikel
Fünfter Artikel
Wir setzen den Wert der Flex-Basis-Eigenschaft als 150px für die zweite und vierte Gegenstände. Der obige Code generiert die folgende Ausgabe:
In ähnlicher Weise können wir die anderen Eigenschaften der Flexbox -Elemente verwenden, um unterschiedliche Funktionen zu erreichen.
Abschluss
Der Flex -Container oder das übergeordnete Element ist ein Box/Container, das mehrere Flex -Elemente enthält, während alles in einem Flexbox -Container als Flexbox -Element oder untergeordnetes Element bezeichnet wird. Um den Flex -Container in der Flexbox zu erstellen, verwenden wir die Anzeigeeigenschaft und weisen ihn entweder Flex- oder Inline -Wert zu. Infolgedessen wird das direkte Kind dieses Flex -Containers zum Flex -Element. In CSS sind mehrere Eigenschaften verfügbar, um mit Flexbox-Elementen zu arbeiten, z. Dieser Artikel umfasste mehrere Eigenschaften von Flexbox -Elementen und erläuterte, wie sie verwendet werden, um ihre Funktionen zu erreichen.