1: Flex layout

Flex layout is shown in Figure 1

Figure 1

1.1 Flex container properties

##1.2 Flex Element attributes in the container

If aligned is defined, it will overwrite the attributes set by justify-content and align-items in the container attributes

In the WeChat applet development project, create a new file layout, and then create various files (named after layout),

in layout.wxml Add the following code:

<view class="container1">
?<view class="item1">
?1
?</view>
<view class="item1">
?2
?</view>
?<view class="item1">
?3
?</view>
?<view class="item1">
?4
?</view>
</view>

Add the following code to layout.wxss:

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

Compile and run as shown in Figure 2

Note: In the above code, 4 sub-elements view(item1) are added to the container1 container. In the style file of item1, the width and height of each item1 are set to a fixed value: 100rpx, rpx is the same as the screen size. The relevant scaling unit is different from the fixed px. The side of each item1 is 1px, solid line (soliod), white (#fff)

Figure 2

Modify .container1 as follows: (Add display:flex;) Compile and run as shown in Figure 3: It can be seen that the flex layout is the default horizontal arrangement of elements

.container1{
????height:?100%;
????width:100%;
????background-color:beige;
????display:flex;
}

Figure 3

##1.1.1 Container properties: flex-direction

Add the following code to .container1: Set the flex layout to arrange the elements vertically (from left to right as the cross axis, from top to bottom as the main axis), as shown in Figure 2. (row: flex layout arranges elements horizontally --- from left to right as the main axis, from top to bottom as the cross axis)

?flex-direction:column

1.1.2 Container attributes: flex- wrap

Add the following code to .container1: At the same time, copy the element code in layout.wxml to the 8 element views, compile and run, the effect is shown in Figure 4, you can see The original height and width are 100rpx, and the square view has been transformed into a rectangle.

flex-wrap:nowrap

Figure 4

If modified to the following code: Compile and run as shown in Figure 5: Make sure that each subview is a square, and then put the 8th subview that cannot fit into the next row

flex-wrap:wrap

##Figure 5

1.1.3容器屬性：?
flex-flow

flex-flow: wrap row,

Compile and run results: As shown in Figure 5, flex-flow is equivalent to flex-direction The combination of the two attributes with flex-wrap

1.1.4容器屬性：justify-content

Add the following code to .container1: Compile and run as shown in Figure 6. Indicates the alignment on the main axis. Since we set

flex-flow: wrap row---

in the above code, it is equivalent to the main axis being from left to right, so the 8th element that cannot be displayed on one line is displayed in the center of the next line. , and the first seven subviews are also displayed in the middle of a row, with blank margins on the left and right sides

justify-content:center

Figure 6

justify-content:flex-end?（主軸為左到右情況下：右對(duì)齊）

編譯運(yùn)行效果如圖7所示：

圖7

justify-content:flex-start?（主軸為左到右情況下：左對(duì)齊）不舉例顯示了
justify-content:space-around---效果如圖8所示，每個(gè)子view左右都有留邊

圖8

justify-content:space-between---
效果如圖9所示，每個(gè)子view左右都有留邊，但是首尾兩個(gè)view各自左右對(duì)齊不留邊

圖9

1.1.5容器屬性：align-items

上面已經(jīng)很詳細(xì)講解主軸上的對(duì)齊方式，這里關(guān)于這個(gè)交叉軸上的對(duì)齊方式同理很簡(jiǎn)單，就不詳細(xì)展開了。

1.2.1?容器內(nèi)元素屬性：flex-grow

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

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

layout.wxss中修改代碼如下：在item1中增加：? flex-grow: 1，增加i3，表示在一行中如果有剩余空間的話，i3之外的子view占1份空間，而i3子view占2份空間，編譯運(yùn)行效果如圖10所示：可以看出i3view所占據(jù)的空間比其余3個(gè)子view大，但是沒有到2倍

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

圖10

1.2.2容器內(nèi)元素屬性：flex-shrink

layout.wxml再增加4個(gè)子view

layout.wxss中修改代碼如下：i3的flex-shrink為0，其余子view為1，這表示當(dāng)空間不足時(shí)所有子view都等比縮小，但是i3的view保持大小不變，編譯運(yùn)行，效果如圖11所示

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

圖11

1.2.3容器內(nèi)元素屬性：
flex-basis

layout.wxss中修改代碼如下：其他代碼保持不變不變，編譯運(yùn)行，效果如圖12所示

.i3{????flex-shrink:?0;????flex-basis:?200rpx
}

圖12

1.2.4容器內(nèi)元素屬性：
flex

flex是grow，shink，basis幾個(gè)屬性的合并，layout.wxss中修改代碼如下：其他代碼保持不變不變，編譯運(yùn)行，效果和圖12保持一樣

.i3{????flex:0?0?200rpx}
1.2.5容器內(nèi)元素屬性：order

layout.wxml中修改代碼如下：設(shè)置每個(gè)view的order屬性為其顯示的順序，編譯運(yùn)行

<view class="container1">
?<view class="item1" style="order:4">
?1
?</view>
<view class="item1" style="order:3">
?2
?</view>
?<view class="item1 i3" style="order:2">
?3
?</view>
?<view class="item1" style="order:1">
?4
?</view>
</view>

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

微信小程序開發(fā)中怎樣實(shí)現(xiàn)地址頁(yè)面三級(jí)聯(lián)動(dòng)

新手怎樣開發(fā)第一款微信小程序

The above is the detailed content of How should WeChat mini programs be laid out?. For more information, please follow other related articles on the PHP Chinese website!