WeChat Mini-ProgrammDas Seitenlayout übernimmt das FlexLayout.
FlexLayout ist eine neue Lösung, die 2009 von W3c vorgeschlagen wurde und verschiedene Seitenlayouts einfach, vollständig und reaktionsschnell implementieren kann.
Flex-Layout bietet Elemente in Containern Sie können sogar dynamisch oder unbegrenzt groß sein.
Das Hauptmerkmal des Flex-Layouts ist die Möglichkeit, die untergeordneten Elemente so anzupassen, dass sie den entsprechenden Platz auf verschiedenen Bildschirmgrößen optimal ausfüllen.
Flex-Layout
Funktionen des Flex-Layouts:
Strecken in jede Richtung, links, rechts, nach unten, nach oben
Sie können die Reihenfolge in der Stilebene ändern und neu anordnen
Die Hauptachse und die Querachse sind praktisch zum Konfigurieren
Raumdehnung und -füllung von untergeordneten Elementen
ausgerichtet entlang des Containers
WeChat-Applet-Implementierungen FlexLayout. Lassen Sie uns kurz die Verwendung des FlexLayouts im WeChat-Applet vorstellen.
Teleskopcontainer
hat <a href="." cn target="_blank">display<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:flex:flex oder display:block Das Element ist ein flex container (flexibler Container), innerhalb dessen die Unterelemente von flex item aufgerufen werden flex container (flexible Elemente) und die Unterelemente in Flex werden alle mit
display:block angeordnet, was als Innenblock-Containermodus Always bezeichnet wird Beginnen Sie mit der Anzeige mit einer neuen Zeile. Die Ansicht-Container (Ansicht, Bildlaufansicht und Wischbewegung) des WeChat-Applets sind standardmäßig alle dispaly:block: Geben Sie den Inline-Containermodus an, in dem untergeordnete Elemente angezeigt werden sollen Eine Zeile. Sie können das
- verwenden, um anzugeben, ob es drei Werte haben soll:
nowrap (kein Zeilenumbruch) display:flex,flex-wrapwrap (Zeile). wrap),wrap-reverse (die erste Zeile des Wraps ist unten)flex-wrapCode mit (Standardwert): Anzeigeeffekt:
display:block
<view class="flex-row" style="display: block;">
<view class="flex-view-item">1</view>
<view class="flex-view-item">2</view>
<view class="flex-view-item">3</view>
</view>
Nach dem Login kopieren
Block
wird in den Anzeigeeffekt von
geändert:
display:flexflex
Sie können den Unterschied zwischen 
und
aus der Darstellung erkennen. Das untergeordnete Element
wird in einer neuen Zeile angezeigt (
) oder inline (
). Der Flex-Container des
blockHauptachsen- und Querachsen-flexviewblock-Layouts kann in jede Richtung ausgelegt werden. Der flex-Container verfügt standardmäßig über zwei Achsen:
Hauptachse (
Haupt
-Achse)
und FlexQuerachse (Querachse)
. Die Startposition der Hauptachse ist (Hauptanfang), die Endposition der Hauptachse ist (Haupt-Ende) und die Länge der Hauptachse ist (Hauptgröße).
In ähnlicher Weise ist der Startpunkt der Querachse 主轴起点(Kreuzanfang), die Endposition ist 主轴终点(Kreuzende) und die Länge ist (Kreuzgröße). Einzelheiten finden Sie im Bild unten: 主轴长度
侧轴起点侧轴终点侧轴长度
Flex-
Richtung
Hinweis,
und Es muss nicht sein. Ebenso muss nicht
sein. Die Richtung der Hauptachse wird durch das Attribut
gesteuert 🎜>
主轴从左到右侧轴: Die horizontale Richtung von links nach rechts ist die Hauptachse从上到下flex-direction
- : Die horizontale Richtung von rechts nach links ist die Hauptachse
row
- : Die vertikale Richtung von oben nach unten ist die Hauptachse
row-reverse
- Die vertikale Richtung von unten nach oben ist die Hauptachse
column
Wenn die horizontale Richtung die Hauptachse ist, ist diese vertikale Richtung die Querachse und umgekehrt. - Darstellungen von vier Spindelrichtungseinstellungen:
column-reverse
Beispielbild
Das Beispiel in der Abbildung zeigt die Verwendung verschiedener The Unterschied in der Anordnungsrichtung der
-Werte. 
Beispielcode:
Operative Wirkung:
flex-direction
Ausrichtung
Es gibt zwei Ausrichtungsmethoden für untergeordnete Elemente:
just<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>y-conent Definieren Sie die Ausrichtung von untergeordneten Elementen auf der Hauptachse
align-items Definieren Sie die Ausrichtung von untergeordneten Elementen auf der Seitenachse
justify-contentEs gibt 5 optionale Ausrichtungen:
flex-startSpindel-Startpunktausrichtung (Standardwert)
flex-endSpindel-Endpunktausrichtung
centerMittig ausgerichtet in der Hauptachse
space-betweenAn beiden Enden ausgerichtet, mit der Ausnahme, dass die untergeordneten Elemente an beiden Enden an beiden Enden an den Containern angelehnt sind, die Abstände dazwischen Die anderen untergeordneten Elemente sind alle gleich.
-
space-around Der Abstand zwischen den einzelnen untergeordneten Elementen ist gleich, und der Abstand zwischen den untergeordneten Elementen an beiden Enden des Containers entspricht ebenfalls dem Abstand zwischen anderen untergeordneten Elementen. Die Ausrichtung von
justify-content bezieht sich auf die Richtung der Hauptachse. In der Abbildung unten wird flex-direction als row verwendet, der Hauptachsenmodus ist 从左到右 und die Beschreibung lautet <a href="http://www.php.%20cn/wiki/48.html" target="_blank">js<code><a href="http://www.php.cn/wiki/48.html" target="_blank">js</a>tify-contenttify-content Anzeigeeffekt von 5 Werten:
justify-content
align-items stellt die Ausrichtung auf der Querachse dar:
-
stretchfüllt den gesamten Container (Standardwert)
flex-startAusrichtung des Startpunkts der Seitenachse
flex-endAusrichtung des Endpunktes der Seitenachse
-
centerMittenbündig in der Querachse
baseline An der ersten Textzeile des untergeordneten Elements ausrichten
align-tiemsDie Ausrichtung der Einstellung hängt von der Richtung der Querachse ab, flex-direction ist row, die Querachsenrichtung ist 从上到下 und der Anzeigeeffekt der fünf Werte von align-items wird beschrieben:
aign-items
Mit der Richtung der Hauptachse und Seitenachse und der Einstellung ihrer Ausrichtung lassen sich die meisten Seitenlayouts realisieren.
Das obige ist der detaillierte Inhalt vonFlex-Layout des WeChat Mini-Programms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
