WeChat Mini-Programm – Was ist Flex-Layout?

Flex ist die Abkürzung für Flexible Box, was „flexibles Layout“ bedeutet und verwendet wird, um maximale Flexibilität für kastenförmige Modelle zu bieten. [Empfohlenes Tutorial: Mini-Tutorial zur Programmentwicklung]

Jeder Container kann als Flex-Layout festgelegt werden.

.box{ display: flex; }

Inline-Elemente können auch das Flex-Layout verwenden.

.box{ display: inline-flex; }

Browser mit Webkit-Kern müssen das Präfix -webkit hinzufügen.

.box{ display: -webkit-flex; /* Safari */ display: flex; }

Beachten Sie, dass nach der Einstellung auf Flex-Layout die Float-, Clear- und Vertical-Align-Attribute von untergeordneten Elementen ungültig sind.

Flex-Grundkonzepte
Elemente, die das Flex-Layout verwenden, werden als Flex-Container (Flex-Container) oder kurz „Container“ bezeichnet. Alle seine untergeordneten Elemente werden automatisch zu Container-Mitgliedern, die als Flex-Elemente (Flex-Elemente) oder kurz „Elemente“ bezeichnet werden.

Der Container verfügt standardmäßig über zwei Achsen: die horizontale Hauptachse (Hauptachse) und die vertikale Querachse (Querachse). Die Startposition der Hauptachse (der Schnittpunkt mit der Grenze) wird als Hauptstart bezeichnet, und die Endposition wird als Hauptende bezeichnet; die Startposition der Querachse wird als Queranfang bezeichnet, und die Endposition wird als Querende bezeichnet.

Elemente werden standardmäßig entlang der Hauptachse angeordnet. Der von einem einzelnen Projekt eingenommene Raum auf der Hauptachse wird als Hauptgröße bezeichnet, und der von einem einzelnen Element eingenommene Raum auf der Querachse wird als Quergröße bezeichnet.

Containereigenschaften

 Flex-Richtung: Die Eigenschaft bestimmt die Richtung der Hauptachse (d. h. die Anordnungsrichtung von Elementen). (Links, Mitte, rechts, oben, Mitte, unten)

 Flex-Wrap: Attributdefinition: Wenn eine Achsenlinie nicht angeordnet werden kann, wie wird die Linie umbrochen?

 Flex-Flow: Die Kurzform des Flex-Direction-Attributs und des Flex-Wrap-Attributs, der Standardwert ist row nowrap

 justify-content: Das Attribut definiert die Ausrichtung von das Element auf der Hauptachse. (Links, Mitte, rechts)

 align-items: Eigenschaft definiert, wie Elemente auf der Querachse ausgerichtet werden. (Oben, Mitte und unten)

 align-content: Das Attribut definiert die Ausrichtung mehrerer Achsen. Diese Eigenschaft hat keine Auswirkung, wenn das Projekt nur eine Achse hat.

Das obige ist der detaillierte Inhalt vonWeChat Mini-Programm – Was ist Flex-Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!