Detailed description of the Flex layout of WeChat mini-program development series (5)

This article introduces the details of the mini-program development series (5) Flex layout. This article introduces the details of the mini-program development series (5) Flex layout.

1: Flex layout

Flex layout 1

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

Add the following code to layout. wxml:

 
  
   1
  
  
   2
  
  
   3
  
  
   4
  
 

Add the following code to layout. wxss:

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

Compile and run 2

Note: In the above code, four sub-elements view (item1) are added to the container1 container. in the style file of item1, set the width and height of each item1 to a fixed value: 100rpx, rpx is the unit of zoom related to the screen size. different from fixed px, the edges of each item1 are 1px, solid line (soliod), and white (# fff)

Modify. container1 as follows: (add display: flex;) compile and run 3: You can see that the flex layout is the default horizontal arrangement element.

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

Modify the code in layout. wxml as follows: add i3

 
  3
 

Layout. modify the code in wxss as follows: add flex-grow: 1 to item1, and add i3 to indicate that if there is space available in a row, the child view outside i3 occupies 1 space, the i3 sub-view occupies 2 parts of space, and the compilation and running effect is as follows: it can be seen that the space occupied by i3view is larger than that occupied by the remaining three sub-views, but it is less than twice

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

Layout. in wxss, modify the code as follows: flex-shrink of i3 is 0, and other sub-views are 1. this indicates that when the space is insufficient, all sub-views are reduced proportionally, however, the view size of i3 remains unchanged, and compilation and running is performed, as shown in Figure 11.

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

The above is a detailed description of the Flex layout of the mini-program development series (5). For more information, see other related articles in the first PHP community!