WeChat applet View: flex layout example

WeChat Mini Program View supports two layout methods: Block and Flex

All Views are block by default

If you want to use flex layout, you need to display Style statement:

display:flex;

Let’s introduce the Flex layout of the WeChat applet

Let’s make a simple demo first

  <view class="main">
    <view class="item item1">1</view>
    <view class="item item2">2</view>
    <view class="item item3">3</view>
  </view>

Add the background color to see it more clearly Some

.main {
  width: 100%;
  background-color: antiquewhite;
}

.item {
  height: 100rpx;
  width: 100rpx;
}

.item1 {
  background-color: red;
}

.item2 {
  background-color: dodgerblue;
}

.item3 {
  background-color: greenyellow;
}

then probably look like this:

Then we first add display: flex

so that we can use flex layout, Idea, it seems that view will not automatically inherit , you need to add it in every view you want to use.

The first is horizontal layout and vertical layout. To set the attribute flex-direction, it has 4 optional values:

• row: horizontal from left to right The direction is the main axis

• row-reverse: the horizontal direction from right to left is the main axis

• column: the vertical direction from top to bottom is Main axis

• column-reverse: The vertical direction from bottom to top is the main axis

Let’s take a look at the difference between setting row and row-reverse:

row：



row-reverse：



Then we have to set For the layout direction of elements in the horizontal direction, you need to set the justify-content attribute. It has 5 optional values:

• flex-start: align the starting point of the main axis (default value )



• ##flex-

  end: Spindle end point alignment



• center: Align in the center of the main axis



• space-between: Align both ends, except for the child elements at both ends. Outside the container at both ends, the spacing between other child elements is equal



• space-around: The distance between each child element is equal, The distance between the child elements at both ends of the container is also the same as the distance between

  other child elements



Then we need to set the element vertically For the layout direction, you need to set the align-items attribute, which has 5 optional values:
• stretch to fill the entire container (default value)



• flex-start aligns the starting point of the side axis (here we manually set the height of the subview to see it more clearly)



• flex-end Align the end of the cross axis



• center Align the center in the cross axis



• baseline aligns with the first line of text of the child element



The child View also has an attribute align-self, which can override the parent The align-items attribute of the element, which has 6 optional values: auto | flex-start | flex-end | center | baseline | stretch (auto inherits the align-items attribute of the parent element, and the others are consistent with align-items)
For example, in the last baseline example above, we set item3 to align-self:flex-end;
It looks like this:



In addition, there is also the flex-wrap attribute, which is used to control whether the sub-View wraps. There are 3 values ​​​​optional:
• nowrap: no line wrapping (default)

• wrap: Line wrap

• wrap-reverse: Line wrap, the first line is at the bottom

There is also a sub-View

ord## The #er attribute can control the order of sub-elements, and the default is 0. For example, in the above example, if we set item3 to order:-1; we can put item3 in front



flex Commonly used layouts are just these

Those who write WeChat mini programs can try it

Finally, if there is a mini program when It would be even better if it can directly support bootstrap

[Related recommendations]

1. HTML5 mobile application development-detailed introduction to the role of viewport (picture Text)

2. A brief discussion of html5 responsive layout

3. HTML5 programming

4. An example tutorial on using co to handle asynchronous processes in small program development

The above is the detailed content of WeChat applet View: flex layout example. For more information, please follow other related articles on the PHP Chinese website!