Shulou(Shulou.com)06/01 Report--

This article mainly explains "the method of WeChat Mini Programs View:flex layout". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "WeChat Mini Programs View:flex layout method".

WeChat Mini Programs View supports two layout methods: Block and Flex. All View defaults to block.

To use a flex layout, you need to explicitly declare:

Display:flex

Next, let's introduce WeChat Mini Programs's Flex layout.

Make a simple demo first.

one hundred and twenty three

With the background color, you can see it 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;}

And then it looks like this:

Snip_20170213230726

Then we all add display: flex first.

Then we all add display: flex first.

Good use of flex layout, idea, it seems that view will not automatically inherit, need to be added to every view you want to use.

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

Row: horizontal axis from left to right

Row-reverse: horizontal axis from right to left

Column: vertical axis from top to bottom

Column-reverse: vertical axis from bottom to top

Then we want to set the horizontal layout direction of the element, we need to set the justify-content property, which has five optional values:

Flex-start: spindle start alignment (default)

Flex-end: spindle end point alignment

Center: Center alignment in spindle

Space-between: both ends are aligned so that the child elements are equally spaced apart except for the containers where the child elements at both ends are facing each other.

Space-around: the distance between each child element is equal, and the distance between the child elements at both ends from the container is the same as the distance between the other child elements.

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

Stretch fills the entire container (default)

The starting point of the flex-start side axis is aligned (here we manually set the height of the sub-view to make it more obvious)

End alignment of flex-end side axes

Center is centered on the side axi

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

The child View also has an attribute align-self, which can override 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, other values are the same as align-items)

For example, in the last example of baseline above, we set item3 to align-self:flex-end.

In addition, there is a flex-wrap attribute, which is used to control whether the child View wraps lines. There are three values that can be selected:

Nowrap: do not wrap (default)

Wrap: line break

Wrap-reverse: line break, the first line is at the bottom

And the child View has an order attribute that controls the order of the child elements, which defaults to 0.

For example, in the same example as above, if we set item3 to order:-1;, we can put item3 first.

These are the common layouts for flex.

Thank you for your reading, the above is the content of "the method of WeChat Mini Programs View:flex layout". After the study of this article, I believe you have a deeper understanding of the method of WeChat Mini Programs View:flex layout, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.