WeChat applet View: flex layout, viewflex

Applet View: flex layout, viewflex

The applet View supports two la S: Block and Flex.

All views are blocks by default.

To use the flex layout, You need to explicitly declare:

display:flex;

 

Next we will introduce the Flex layout of the applet.

First make a simple demo

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

With the background color, you can see more clearly.

.main {  width: 100%;  background-color: antiquewhite;}.item {  height: 100rpx;  width: 100rpx;}.item1 {  background-color: red;}.item2 {  background-color: dodgerblue;}.item3 {  background-color: greenyellow;}

Then it looks like this:

 

Then we add the display: flex

The idea of using the flex layout seems that the view will not be automatically inherited and must be added to each view you want to use.

 

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

• Row: the horizontal direction from left to right is the spindle.
• Row-reverse: the horizontal direction from right to left is the main axis
• Column: the vertical direction from top to bottom is the 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 need to set the layout direction of the element in the horizontal direction. We need to set the justify-content attribute, which has five optional values:

• Flex-start: spindle start point alignment (default)

• Flex-end: spindle end point alignment

• Center: center and align in the spindle

• Space-between: alignment between the two ends. Except for the sub-elements at the two ends, the sub-elements at the two ends depend on the containers at the two ends respectively.

• Space-around: the distance between each sub-element is equal. The distance between the sub-elements at both ends is the same as that between the container and other sub-elements.

 

 

Then we need to set the layout direction of the element in the vertical direction. We need to set the align-items attribute, which has five optional values:

• Stretch fills the entire container (default)

• Start Point alignment of the flex-start side axis (Here we manually set the height of the sub-view to see more clearly)

• End Point alignment of the flex-end side axis

• Center Align in the left-side axis

• Baseline is aligned with the first line of text of the child element

 

 

The sub-View also has an align-self attribute that can overwrite the align-items attribute of the parent element. It has six 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, the flex-wrap attribute is used to control whether the child View contains line breaks. Three Optional values are available:

• Nowrap: Do not wrap (default)
• Wrap: line feed
• Wrap-reverse: line feed. The first line is at the bottom.

 

The subview has an order attribute to control the order of sub-elements. The default value is 0.

For example, in the above example, we set item3 to order:-1; item3 can be placed first

 

Common flex la S.

Try writing a applet.

 

Finally, it would be better if the applet could directly support bootstrap...