WeChat Mini Program-What is Flex Layout?

Flex is the abbreviation of Flexible Box, which means "flexible layout" and is used to provide maximum flexibility for box-shaped models. [Recommended tutorial: 小program development tutorial]

Any container can be designated as Flex layout.

.box{ display: flex; }

Inline elements can also use Flex layout.

.box{ display: inline-flex; }

Browsers with Webkit core must add the -webkit prefix.

.box{ display: -webkit-flex; /* Safari */ display: flex; }

Note that after setting to Flex layout, the float, clear and vertical-align attributes of child elements will be invalid.

Basic concepts of Flex
Elements that adopt Flex layout are called Flex containers (flex containers), referred to as "containers". All its child elements automatically become container members, called Flex items (flex items), or "items" for short.

Containers have two axes by default: the horizontal main axis (main axis) and the vertical cross axis (cross axis). The starting position of the main axis (the intersection with the border) is called main start, and the ending position is called main end; the starting position of the cross axis is called cross start, and the ending position is called cross end.

Items are arranged along the main axis by default. The main axis space occupied by a single item is called main size, and the cross axis space occupied by a single item is called cross size.

Container properties

 flex-direction: The property determines the direction of the main axis (that is, the arrangement direction of items). (Left, middle, right, top, middle, bottom)

 flex-wrap: Attribute definition, if one axis line cannot be arranged, how to wrap the line.

 flex-flow: The short form of the flex-direction property and the flex-wrap property, the default value is row nowrap

 justify-content: The property defines the alignment of the item on the main axis . (Left, center, right)

 align-items: Property defines how items are aligned on the cross axis. (Top, middle and bottom)

 align-content: The attribute defines the alignment of multiple axes. This property has no effect if the project has only one axis.

The above is the detailed content of WeChat Mini Program-What is Flex Layout?. For more information, please follow other related articles on the PHP Chinese website!