When we are developing WeChat applets, we basically need to lay out the page. There are many layout methods. The flex layout can basically solve all our needs and is simple and easy to learn.
Flex is the abbreviation of Flexible Box, which means "flexible layout", and is used to provide maximum flexibility for box models.
The core of the flex layout is in the container. There are two axes by default, one is the horizontal main axis and the other is the vertical cross axis, supporting the entire container.
Any container can be designated as a flex layout.
.body {
display: flex;
}
In this way, we set the flex type layout of the container.
The important attributes of flex layout are:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction property
The flex-direction determines the direction of the main axis.
There are four selectable values:
- row (default): The main axis is horizontal, and the starting point is at the left end.
- row-reverse: The main axis is in the horizontal direction, and the starting point is at the right end.
- column: The main axis is the vertical direction, and the starting point is at the upper edge.
- column-reverse: The main axis is in the vertical direction, and the starting point is at the bottom edge.
We write a simple use case:
<view class="body">
<view></view>
<view></view>
</view>
.body > view {
background-color: red;
width: 100rpx;
height: 100rpx;
margin: 20rpx;
}
We simply wrote two views, and set the width, height and background color to them to facilitate us to see the effect. We did not do any layout operations on the parent view, so its default effect is as follows:
because the view is a block element, So unsurprisingly, the two views are on a separate line, arranged one above the other.
Then we add the following code to the parent view in WXSS:
.body {
display: flex;
flex-direction: row;
}
Now let's look at the effect again: the
two views are in the same row and arranged left and right. Because we set flex-direction: row, row means horizontal layout, so the actual effect is in line with our theoretical results.
flex-wrap attributes
flex-wrap is the situation when one line in the container is not lined up and needs to be wrapped. The
selectable values are:
- nowrap
- wrap
- When wrap-reverse
is not set, by default, the value of flex-warp is nowarp.
Let's demonstrate with code:
<view class="body">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
</view>
.body {
display: flex;
flex-direction: row;
}
.body > view {
width: 100rpx;
height: 100rpx;
background-color: red;
margin: 20rpx;
font-size: 50rpx;
}
This is the effect without any settings:
It can be seen that these views have been deformed, and the width is not 100rpx, because by default, the value of flex-warp is nowarp, so it is very obedient and can only be squeezed together without wrapping.
Next, we set the value of flex-warp to warp, and look at the effect: it
can be seen that when the width of the remaining position in a line is less than 100rpx, it performs a line break, which is the effect of flex-warp:warp.
Next, let's take a look at the effect of wrap-reverse:
we can see that the view has been wrapped and the rows are arranged in reverse, which is in line with our expectations.
flex-flow properties
The flex-flow attribute is a combination of flex-direction and flex-wrap. If it is not set, the default value is row nowarp.
Let's briefly demonstrate:
The content of WXML remains unchanged. In WXSS, only the value of flex-flow is set for the parent view. Let's see the effect.
.body {
display: flex;
flex-flow: row wrap;
}
.body > view {
width: 100rpx;
height: 100rpx;
background-color: red;
margin:20rpx;
font-size: 50rpx;
}
The page effect is as expected, the orientation is landscape, and the line is wrapped.
justify-content attribute
Justify-content is to set the alignment of the content of the container on the main axis.
Its commonly used values are:
- flex-start (default): left-justified
- flex-end: align right
- center: centered
- space-between: Justified at both ends, the space between items is equal.
- Space-around: The space on both sides of each item is equal. Therefore, the interval between items is twice as large as the interval between items and the border.
Let's briefly demonstrate with code:
flex-start:
<view class="body">
你好啊
</view>
.body {
display: flex;
justify-content: flex-start;
width: 100%;
height: 100rpx;
background-color: greenyellow;
}
flex-end:
center：
space-between：
<view class="body">
<text>你好啊</text>
<text>我爱你</text>
</view>
.body {
display: flex;
justify-content: space-between;
width: 100%;
height: 100rpx;
background-color: greenyellow;
}
space-around:
All within our theoretical expectations.
align-items attribute
align-items is to set how the content of the container is aligned on the vertical cross axis.
Its commonly used values are:
- flex-start: align the starting point of the cross axis
- flex-end: align the end of the cross axis
- center: align the midpoint of the cross axis
- baseline: the baseline alignment of the first line of text of the project
- stretch (default value): If the item is not set to height or set to auto, it will occupy the height of the entire container
. The first three values are mainly used here.
Code and demo effect:
flex-start:
<view class="body">
我爱你
</view>
.body {
display: flex;
align-items: flex-start;
width: 100%;
height: 100rpx;
background-color: greenyellow;
}
flex-end：
center：
align-content attribute
align-content is to set the alignment of multiple axis lines. If there is only one axis line, the entire attribute will not work.
Its commonly used values are:
-
flex-start: align with the starting point of the cross axis.
-
flex-end: align with the end of the cross axis.
-
center: Align with the midpoint of the cross axis.
-
Space-between: align with both ends of the cross axis, and the space between the axes is evenly distributed.
-
Space-around: The intervals on both sides of each axis are equal. Therefore, the interval between the axes is twice as large as the interval between the axes and the frame.
-
stretch (default): The axis occupies the entire cross axis.
Code and demonstration effect:
stretch (default):
<view class="body">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
</view>
.body {
display: flex;
flex-flow: row wrap;
height: 800rpx;
align-content: stretch;
background-color: greenyellow;
}
.body > view {
width: 100rpx;
height: 120rpx;
font-size: 50rpx;
background-color: red;
margin: 20rpx;
}
flex-start：
flex-end:
center:
space-between:
space-around:
flex is a very simple and easy-to-use layout method. You can effectively combine and use several of its properties to complete the daily page layout.
If you have any questions about the WeChat applet, please contact QQ: 505417246.
Follow the WeChat official account below, and you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs and other practical learning materials
