A brief introduction to Flex layout of display attribute in CSS3

This article brings you a brief introduction to the Flex layout of the display attribute in CSS3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Recently I am learning WeChat applet. When designing the layout of the homepage, I came across a new layout method display:flex

 .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: #b3d4db;
 }

The effect after compilation is very obvious, and the layout of the interface is also very reasonable. , looks very clear. So what is this attribute used for?

　Flex is the abbreviation of Flexible Box, which means "flexible layout" and is used to provide maximum flexibility for box-shaped models. After setting to Flex layout, the float, clear and vertical-align attributes of the child elements will be invalid.

It can be applied to containers or inline elements. (The above description is combined with the WeChat developer tool description) In 2009, W3C proposed a new solution-Flex layout, which can implement various page layouts simply, completely, and responsively. Currently, it is supported by all browsers, which means it is now safe to use this feature.

Basic concepts

Elements that adopt Flex layout are called Flex containers (flex containers), or "containers" for short. All its child elements automatically become container members, called Flex items (flex items), referred to as "items". The container has two axes by default: the horizontal main axis and the vertical 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 It’s called cross end. Items are arranged along the main axis by default. The main axis space occupied by a single project is called main size, and the cross axis space occupied by a single item is called cross size.

The following 6 properties are set on the container:

flex-direction The arrangement direction of the items in the container (default horizontal arrangement)

flex-wrap　The wrapping method of items in the container

flex-flow　The abbreviation of the above two properties

justify-content　The alignment of items on the main axis

align-items　Item How to align on the cross axis

align-content Defines the alignment of multiple axes. This property has no effect if the project has only one axis.

flex-direction

## 1 .box { 2 flex-direction: row | row-reverse | column | column-reverse; 3 }

flex-wrap 1 .box{ 2 flex-wrap: nowrap | wrap | wrap-reverse; 3 }

flex-flow

1     .item {
2       order: ;
3     }

1     .item {
2       flex-grow: ; /* default 0 */
3     }

1     .item {
2       flex-shrink: ; /* default 1 */
3     }

1     .item {
2       flex-basis:  | auto; /* default auto */
3     }

1     .item {
2       flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
3     }

1     .item {
2       align-self: auto | flex-start | flex-end | center | baseline | stretch;
3     }