Helfen Sie der Entwicklung der Website und teilen Sie den Artikel mit Freunden!
Einführung in CSS-Flexbox-Eigenschaften
Die Flexbox-Struktur soll eine effektivere Methode zum Organisieren, Ausrichten und Verteilen von Raum zwischen Elementen in einem Container bieten, auch wenn ihre Größe nicht spezifiziert oder dynamisch ist. Das Flexbox-Modul, das typischerweise als Flexbox bezeichnet wird, wurde als eindimensionales Layoutmodell und auch als Verfahren entwickelt, das eine Raumverteilung zwischen Elementen in einer Anwendung und eine effiziente Ausrichtungsfunktionalität bereitstellen kann.In diesem Thema werden wir etwas über CSS-Flexbox-Eigenschaften lernen.
Die Grundidee hinter dem Flex-Layout besteht darin, dem Container die Möglichkeit zu geben, die Breite/Höhe seiner Gegenstände zu ändern, um den verfügbaren Platz optimal auszufüllen (oft um Anzeigegeräte und Bildschirmgrößen aller Art aufzunehmen). Wenn das normale Layout sowohl auf die Block- als auch auf die Inline-Flussrichtungen zentriert ist, wird das Flex-Layout auf die Flex-Flussrichtungen zentriert
CSS-Flexbox-Eigenschaften mit Beispielen
Wir werden die Verwendung von Flexbox-Eigenschaften anhand von Beispielen besprechen.
Beispiele 1 - Flex-Eigenschaft
Die CSS-Flex-Eigenschaft definiert die Komponenten mit flexibler Länge. d.h. es misst die flexible Länge für flexible Artikel.
Syntax
flex: ( flex-wachsen flex-schrumpfen flex-basis) - automatisch - anfänglich - erben;
Code:
Beispiel für CSS-Flexbox-Eigenschaft
EDUCBA
EDUCBA
EDUCBA
Ausgabe:
Verwenden Sie in den nächsten Beispielen die obigen Schritte, um das Ergebnis einer HTML-Seite anzuzeigen.
Beispiele 2 - Flex-Direction Property
Die CSS-Eigenschaft flex-direction definiert, wie Flex-Elemente im Flex-Container positioniert werden, indem sie die Richtung der Hauptachse des Flex-Containers angibt.
Syntax
Flex-Richtung: Zeile - Zeilenumkehrung - Sp alte - Sp altenumkehrung - anfänglich - erben
Code:
Beispiel für CSS-Flexbox-Eigenschaft
Kasten 1
Kasten 2
Kasten 3
Ausgabe:
Beispiele 3 - Flex-Wrap-Eigenschaft
Die CSS-Flex-Wrap-Eigenschaft bestimmt, ob die Flex-Objekte je nach verfügbarem Platz des Flex-Containers in eine einzelne Zeile geschoben oder in mehrere Zeilen oder Sp alten umbrochen werden.
Syntax
flex-wrap: nowrap - wickeln - Wrap-Rückseite - anfänglich - erben
Code:
Beispiel für CSS-Flexbox-Eigenschaft
Kasten 1
Kasten 2
Kasten 3
Kasten 4
Ausgabe:
Beispiele 4 - Flex-Flow-Eigenschaft
Die CSS-Eigenschaft flex-flow ist eine vereinfachte Eigenschaft, um individuelle Eigenschaften gleichzeitig mit flex-direction und flex-wrap festzulegen.
Syntax
flex-flow: ( flex-direction flex-wrap ) - anfänglich - erben
Code:
Beispiel für CSS-Flexbox-Eigenschaft
Kasten 1
Kasten 2
Kasten 3
Kasten 4
Ausgabe:
Beispiele 5 - Flex-Grow Property
Die CSS-Eigenschaft flex-grow bestimmt, wie das Flex-Element im Flex-Container relativ zu den anderen darin enth altenen Elementen expandieren soll.
Syntax
flex-grow: Zahl - anfänglich - erben
Code:
Beispiel für CSS-Flexbox-Eigenschaft
EDUCBA
EDUCBA
EDUCBA
Ausgabe:
Beispiele 6 - Flex-Shrink-Eigenschaft
Die CSS-Eigenschaft flex-shrink legt fest, wie das Flex-Element innerhalb des Flex-Containers gemäß einigen anderen darin enth altenen Elementen verkleinert werden soll.
Syntax
flex-shrink: Zahl - anfänglich - erben
Code:
Beispiel für CSS-Flexbox-Eigenschaft
1
2
3
Ausgabe:
Schlussfolgerung
In diesem Artikel haben wir die Flexbox-Eigenschaften ausführlich besprochen, um ihre Funktionsweise besser zu verstehen. Das Flexbox-Modell eignet sich am besten für die Elemente einer Anwendung und kleine Designs. Die Flex-Eigenschaft ist sehr reaktionsschnell und komfortabel für den mobilen Einsatz. Es bietet eine einfache und leistungsstarke Eigenschaft, um Platz zuzuweisen und Inh alte so zu koordinieren, wie es häufig von Webanwendungen und komplexen Webseiten benötigt wird.
Empfohlene Artikel
Das ist ac Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -
- CSS-Farbkarte
- Sch altfläche in CSS
- CSS Border Generator
- CSS-Cursor