Das Seitenlayout des WeChat-Miniprogramms übernimmt das Flex-Layout.
FlexLayout ist eine neue L?sung, die 2009 von W3c vorgeschlagen wurde und mit der verschiedene Seitenlayouts einfach, vollst?ndig und reaktionsschnell realisiert werden k?nnen.
Flex-Layout sorgt für die Ausrichtung, Richtung und Reihenfolge der Elemente im Container und sie k?nnen sogar dynamisch oder unbegrenzt gro? sein.
Das Hauptmerkmal des Flex-Layouts ist die M?glichkeit, seine untergeordneten Elemente so anzupassen, dass sie den entsprechenden Raum auf die am besten geeignete Weise in verschiedenen Bildschirmgr??en ausfüllen.

Flex-Layout

Merkmale des Flex-Layouts:

• Teleskopierbar in jede Richtung , links, rechts, unten, oben

• Die Reihenfolge kann in der Stilebene ausgetauscht und neu angeordnet werden

• Die Hauptachse und die Seitenachse sind bequem zu konfigurieren

• Raumdehnung und -füllung von untergeordneten Elementen

• Entlang des Containers ausrichten

WeChat Mini Das Programm implementiert das Flex-Layout. Lassen Sie uns kurz die Verwendung des Flex-Layouts in WeChat-Miniprogrammen vorstellen.

Flexibler Container

Ein Element mit <a href="http://m.miracleart.cn/wiki/927.html" target="_blank">display</a>:flex oder display:block ist ein flex container (flexibler Container), und die darin enthaltenen untergeordneten Elemente hei?en flex item (flexible Elemente), flex container Neutronenelemente werden alle im Flex-Layout eingegeben.

• display:block ist als Blockcontainermodus angegeben und beginnt immer mit der Anzeige mit einer neuen Zeile. Die Ansichtscontainer (Ansicht, Bildlaufansicht und Wischbewegung) des WeChat-Applets sind alle . dispaly:block

• : Als Inline-Containermodus gekennzeichnet, untergeordnete Elemente in einer Zeile anzeigen. Mit dem Attribut display:flex k?nnen Sie angeben, ob es einen Umbruch haben soll drei Werte: flex-wrapnowrap (kein Zeilenumbruch)flex-wrap,wrap (Zeilenumbruch),wrap-reverse (erste Zeile unten umbrechen)Verwenden Sie (Standardwert) Code:
  display:block

  Anzeigeeffekt:

  <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>

Block

ist ge?ndert zu

Anzeigeeffekt:

display:flex

flex

Sie k?nnen den Unterschied zwischen

und

aus der Darstellung erkennen, das untergeordnete Element blockOb es in einer neuen Zeile (flex) oder inline (view) angezeigt wird. blockflexHauptachse und Querachse

Der Flexcontainer des Layouts kann in jede Richtung ausgelegt werden. Der

-Container verfügt standardm??ig über zwei Achsen: FlexHauptachse (
Haupt-Achse) und Querachse (Querachse) . Die Startposition der Hauptachse ist (Hauptanfang), die Endposition der Hauptachse ist
(Hauptende) und die L?nge der Hauptachse ist 主軸起點(diǎn) (Hauptgr??e). . 主軸終點(diǎn)In ?hnlicher Weise ist der Startpunkt der Querachse 主軸長(zhǎng)度(Kreuzanfang), die Endposition ist
(Kreuzende) und die L?nge ist 側(cè)軸起點(diǎn)(Kreuzgr??e). Einzelheiten finden Sie im Bild unten: 側(cè)軸終點(diǎn)側(cè)軸長(zhǎng)度

Flex-Richtung

Beachten Sie, dass

nicht unbedingt

bedeutet. 主軸 ist nicht unbedingt 從左到右. Die Richtung der Hauptachse wird durch das Attribut 側(cè)軸 gesteuert. Es hat 4 optionale Werte: 從上到下flex-direction

• : von links nach rechts Die horizontale Richtung ist die Hauptachse

  row

• : von rechts nach links Die horizontale Richtung ist die Hauptachse

  row-reverse

• : von oben nach unten Die vertikale Richtung ist die Hauptachse

  column

• Die vertikale Richtung von unten nach oben ist die Hauptachse

  column-reverse

Wenn die horizontale Richtung die Hauptachse ist, ist die vertikale Richtung die Seitenachse und umgekehrt.

Darstellungen von vier Spindelrichtungseinstellungen:

Beispielbild

Das Beispiel in der Abbildung zeigt die Verwendung verschiedener The Unterschied in der Anordnungsrichtung der

-Werte.

Beispielcode:flex-direction

Laufeffekt:

<view >
    <view class="flex-row" style="display: flex;flex-direction: row;">
        <view class="flex-view-item">1</view>
        <view class="flex-view-item">2</view>
        <view class="flex-view-item">3</view>
    </view>
    <view class="flex-column" style="display:flex;flex-direction: column;" >
        <view class="flex-view-item">c1</view>
        <view class="flex-view-item">c2</view>
        <view class="flex-view-item">c3</view>
    </view>
</view>

Flex-Richtung

Ausrichtung

Es gibt zwei Ausrichtungsmethoden für untergeordnete Elemente:

Definieren Sie die Ausrichtung von untergeordneten Elementen auf der Hauptachse

justify-conent Definieren Sie die Ausrichtung von untergeordneten Elementen auf der Seitenachse
align-items

hat 5 optionale Ausrichtungen:

• flex-startSpindel-Startpunktausrichtung (Standardwert)

• flex-endSpindel-Endpunktausrichtung

• centerMittig ausgerichtet in der Hauptachse

• space-betweenAn beiden Enden ausgerichtet, mit Ausnahme der untergeordneten Elemente an beiden Enden, die sich in der N?he der Container an beiden Enden befinden Die Abst?nde zwischen anderen untergeordneten Elementen sind gleich

• space-around Der Abstand zwischen den einzelnen untergeordneten Elementen ist gleich, und der Abstand zwischen den untergeordneten Elementen an beiden Enden des Containers ist ebenfalls gleich Abstand zwischen anderen untergeordneten Elementen. Die Ausrichtung von
  justify-content bezieht sich auf die Richtung der Hauptachse. Die folgende Abbildung verwendet flex-direction als row, der Hauptachsenmodus ist 從左到右 und beschreibt den Anzeigeeffekt der 5 Werte ?von jstify-content:
  

  
  

  justify-content

align-items stellt die Ausrichtung auf der dar Querachse:

• stretch Den gesamten Beh?lter füllen (Standard)

• flex-start Startpunkt der Querachse ausrichten

• flex-end Querachse Richten Sie die Endpunkte der

• center Mitte in der Querachse

• An der ersten Textzeile des untergeordneten Elements ausrichten baseline

Die Ausrichtungseinstellung h?ngt von der Richtung der Querachse ab. Das folgende Bild verwendet align-tiems als flex-direction, die Querrichtung ist row und beschreibt die 5 von 從上到下 Wertanzeigeeffekt: align-items

aign -items

Mit der Richtung der Hauptachse und der Seitenachse und der Einstellung ihrer Ausrichtung k?nnen Sie die meisten Seitenlayouts erreichen.

[Verwandte Empfehlungen]

1.

Download des Quellcodes der WeChat-Plattform für ?ffentliche Konten

2.Xiaozhu CMS Life Tong O2O-System v2. 0 Exclusive Edition herunterladen

3.

Little Pigcms (pigcms) WeChat Marketing System V8.52 Pinhaohao Mall Secondary Development Special Edition

Das obige ist der detaillierte Inhalt vonDetaillierte Erl?uterung des Flex-Layouts für die WeChat-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!