WeChat Mini-Programm – Was ist Flex-Layout?

云罗郡主
Freigeben: 2019-01-21 11:56:02
nach vorne
4008 Leute haben es durchsucht

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; }
Nach dem Login kopieren

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

.box{ display: inline-flex; }
Nach dem Login kopieren

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

.box{ display: -webkit-flex; /* Safari */ display: flex; }
Nach dem Login kopieren

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.

WeChat Mini-Programm – Was ist Flex-Layout?

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!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage