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

This article will explain in detail the example analysis of Flex layout in Wechat development. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

WeChat Mini Programs page layout is the use of Flex layout.

Flex layout is a new scheme put forward by W3C in 2009, which can realize all kinds of page layout in a simple, complete and responsive manner.

The Flex layout provides the alignment, orientation, and order of elements in the container, even if they can be dynamic or indeterminate size.

The main feature of Flex layout is the ability to adjust its child elements in different screen sizes to fill the right space in the most appropriate way.

Flex layout

Features of Flex layout:

Stretch in any direction, left, right, down, up

The order can be changed and rearranged at the style layer.

The spindle and side shaft are easy to configure.

Spatial stretching and filling of child elements

Align along the container

WeChat Mini Programs realized the Flex layout and briefly introduced the use of Flex layout in WeChat Mini Programs.

Telescopic container

The element with display:flex or display:block is a flex container (telescopic container), in which the child elements are called flex item (telescopic project), and the flex container subelements are typeset using Flex layout.

Display:block is specified as the in-block container mode, which always starts with a new line. WeChat Mini Programs's view containers (view,scroll-view and swiper) default to dispaly:block.

Display:flex: specifies the inline container mode and displays child elements within a line. You can use the flex-wrap attribute to specify whether to wrap. Flex-wrap has three values: nowrap (no line wrapping), wrap (newline), and wrap-reverse (the first line of the newline is below).

Code that uses display:block (the default):

1 2 3

Display effect:

Block

Change to the display effect of display:flex:

Flex

You can see the difference between block and flex from the effect diagram, and whether the child element view is displayed in line wrapping (block) or inline display (flex).

Spindle and side axle

The telescopic container of the Flex layout can be laid out in any direction.

The container has two axes by default: the principal axis (main axis) and the side axis (cross axis).

The starting position of the spindle is the starting point of the spindle (main start), the end position of the spindle is the end of the spindle (main end), and the length of the spindle is the length of the spindle (main size).

The starting point of the same lateral axis is the starting point of the lateral axis (cross start), the end position is the end of the lateral axis (cross end), and the length is the length of the lateral axis (cross size). For details, please see the following figure:

Flex-direction

Note that the principal axis is not necessarily from left to right, and the same side axis is not necessarily from top to bottom. The direction of the principal axis is controlled by the flex-direction attribute, which 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

The vertical direction of column-reverse from bottom to top is the principal axis.

If the horizontal direction is the principal axis, that vertical direction is the lateral axis, and vice versa.

Effect of four spindle orientation settings:

Sample diagram

The example in the figure shows the difference in the direction of arrangement using different flex-direction values.

Example code:

1 2 3 c1 c2 c3

Running effect:

Flex-direction

Alignment mode

There are two ways to align child elements:

Justify-conent defines the alignment of child elements on the spindle

Align-items defines how child elements are aligned on the side axis

Justify-content has five optional alignments:

Flex-start spindle start alignment (default)

Flex-end spindle end point alignment

Center is centered on the spindle

The two ends of the space-between are aligned so that the child elements are equally spaced except for the containers where the child elements at both ends are facing each other.

The distance between each child element of space-around is equal, and the distance between the child elements at both ends of the container is the same as the distance between other child elements.

The alignment of justify-content is related to the direction of the principal axis. The following figure takes flex-direction as the row, and the spindle mode is from left to right, describing the display effect of jstify-content5 values:

Justify-content

Align-items indicates alignment on the side axis:

Stretch fills the entire container (default)

Alignment of the start point of the flex-start side axis

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 alignment set by align-tiems is related to the direction of the side axis. The following figure takes flex-direction as the row, and the side axis direction is from top to bottom, describing the display effect of the five values of align-items:

Aign-items

With the orientation of the principal and side axes and setting their alignment, you can achieve most of the page layout.

This is the end of the article on "sample Analysis of Flex layout in Wechat Development". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

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.