WeChat Mini-Programmentwicklungsreihe (5) Detaillierte Erläuterung des Flex-Layouts

In diesem Artikel wird die WeChat-Applet-Entwicklungsreihe (5) vorgestellt. Detaillierte Erläuterung des Flex-Layouts

1: Flex-Layout

Flex-Layout ist in Abbildung 1 dargestellt

Abbildung 1

1.1 Flex-Container-Eigenschaften

1.2 Elementeigenschaften im Flex-Container

Wenn align definiert ist, überschreibt es den justify-content in den Containerattributen und die durch align-items festgelegten Attribute.

Im WeChat-Applet-Entwicklungsprojekt , ein neues Dateilayout erstellen, dann verschiedene Dateien erstellen (benannt nach dem Layout),

Fügen Sie den folgenden Code zu „layout.wxml“ hinzu:

<view class="container1">

<view class="item1">
1
</view>

<view class="item1">
2
</view>

<view class="item1">
3
</view>

<view class="item1">
4
</view>

</view>

Fügen Sie den folgenden Code zu „layout.wxss“ hinzu:

.container1{
    height: 100%;
    width:100%;
    
}


.item1{
    height:100rpx;
    width:100rpx;
    background-color:cyan;
    border: 1px solid #fff
}

Kompilieren und ausführen, wie in Abbildung 2 gezeigt

Hinweis: Im obigen Code werden dem Container1 Container 4 Unterelemente view(item1) sowie Breite und Höhe hinzugefügt Für jedes Element1 sind in der Stildatei von Element1 feste Werte festgelegt: 100 rpx, rpx ist die Skalierungseinheit in Bezug auf die Bildschirmgröße, anders als bei festen px, die Seite jedes Elements1 beträgt 1 px, durchgezogene Linie (durchgezogen). , weiß (#fff)

Ändern Sie .container1 wie folgt: (Anzeige hinzufügen:flex;) Kompilieren und ausführen, wie in Abbildung 3 gezeigt: Es ist ersichtlich, dass der Flex Layout ist die standardmäßige horizontale Anordnung von Elementen

.container1{
    height: 100%;
    width:100%;
    
    display:flex;
}

1.1.1 Containerattribute: Flex-Richtung

Fügen Sie den folgenden Code in .container1 hinzu: Zeigt an Legen Sie das Flex-Layout fest, um Elemente vertikal anzuordnen (von links nach rechts als Querachse, von oben nach unten als Hauptachse), wie in Abbildung 2 gezeigt. (Zeile: Flex-Layout ordnet Elemente horizontal an --- von links nach rechts als Hauptachse, von oben nach unten als Querachse)

flex-direction:column

1.1.2 Container Eigenschaften: flex -wrap

Fügen Sie den folgenden Code zu .container1 hinzu: Kopieren Sie gleichzeitig den Elementcode in layout.wxml in die 8 Elementansichten, kompilieren Sie ihn und führen Sie ihn aus. Der Effekt ist in Abbildung 4 dargestellt. Sie können sehen, dass die ursprüngliche Höhe und Breite 100 rpx beträgt. Die quadratische Ansicht wurde in ein Rechteck umgewandelt.

flex-wrap:nowrap

Bei Änderung des folgenden Codes: Kompilieren und ausführen, wie in Abbildung 5 gezeigt: Stellen Sie sicher, dass jede Unteransicht ein Quadrat ist. und dann einfügen Die 8. untergeordnete Ansicht, die nicht passt, wird in der nächsten Zeile platziert

flex-wrap:wrap

1.1.3 Containereigenschaften: Flex -flow

Flex-Flow: Zeilenumbruch, Kompilierungs- und Ausführungsergebnisse: Wie in Abbildung 5 gezeigt, entspricht Flex-Flow der Kombination der beiden Attribute Flex-Direction und Flex-Wrap

1.1.4 Containerattribut: justify-content

Fügen Sie den folgenden Code zu .container1 hinzu: Kompilieren und ausführen, wie in Abbildung 6 gezeigt. Gibt die Ausrichtung auf der Hauptachse an. Da wir im obigen Code „flex-flow: wrap row“ festgelegt haben, entspricht dies der Ausrichtung der Hauptachse von links nach rechts, sodass das 8. Element angezeigt wird, das nicht in einer Zeile angezeigt werden kann in der Mitte der nächsten Zeile und die ersten sieben Unteransichten, die ebenfalls in der Mitte einer Zeile angezeigt werden, mit leeren Rändern auf der linken und rechten Seite

justify-content:center

justify-content:flex-end ( Wenn die Hauptachse von links nach rechts verläuft: rechtsbündig)

Der Kompilierungs- und Ausführungseffekt ist in Abbildung 7 dargestellt:

justify-content:flex-start (Hauptachse Für den Fall von links nach rechts: linksbündig) wird im Beispiel nicht

justify-content:space-around---der Effekt ist in Abbildung 8 dargestellt, jede Unteransicht links und rechts Es gibt Ränder

justify-content: space-between --- Der Effekt ist in Abbildung 9 dargestellt. Jede Unteransicht hat links und rechts Ränder, aber die erste und letzte Ansicht werden links und rechts ausgerichtet, ohne Kanten zu hinterlassen

1.1.5容器属性：align-items

上面已经很详细讲解主轴上的对齐方式，这里关于这个交叉轴上的对齐方式同理很简单，就不详细展开了。

1.2.1 容器内元素属性：flex-grow

layout.wxml中修改代码如下：增加i3

<view class="item1 i3">
3
</view>

layout.wxss中修改代码如下：在item1中增加：  flex-grow: 1，增加i3，表示在一行中如果有剩余空间的话，i3之外的子view占1份空间，而i3子view占2份空间，编译运行效果如图10所示：可以看出i3view所占据的空间比其余3个子view大，但是没有到2倍

.item1{
    height:100rpx;
    width:100rpx;
    
    border: 1px solid #fff;
    flex-grow: 1
}

.i3{
    flex-grow: 2
}

1.2.2容器内元素属性：flex-shrink

layout.wxml再增加4个子view

layout.wxss中修改代码如下：i3的flex-shrink为0，其余子view为1，这表示当空间不足时所有子view都等比缩小，但是i3的view保持大小不变，编译运行，效果如图11所示

.item1{
    height:100rpx;
    width:100rpx;
    
    border: 1px solid #fff;
    flex-shrink: 1
}


.i3{
    flex-shrink: 0
}

Das obige ist der detaillierte Inhalt vonWeChat Mini-Programmentwicklungsreihe (5) Detaillierte Erläuterung des Flex-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!