I’ve been in touch with FLEX layouts of CSS for a long time, and I’ve been using them extensively in recent mobile development. Old come much forgetfulness, can comb knowledge point by oneself only, regard as review old knowledge new.

, please forgive xiaobai’s talent and learning, write the place is not in place please correct.

The Flex property is used to set or retrieve how the children of an elastic box model object are allocated space. That is, when a div uses Flex, it becomes a Flex container, and its children don’t work even with float, vertical-align, and clear. So let’s take a look at flex’s six properties.

1, Flex direction, flex direction, flex direction With Flex, the container has two axes by default: a horizontal main axis and a vertical cross axis.

Ps: MY personal understanding is X axis and Y axis, so as to facilitate my memory, X (horizontal axis) and Y (cross axis) are used to illustrate.

Once you know that the container has an X-axis and a Y-axis, it’s easier to go back to this property. First, it can be the X-axis alignment (common left and right alignment), and then it can be the Y-axis alignment (vertical alignment)

First row is left aligned by default, and then row-reverse is right aligned. And then column is aligned vertically, and then the last property is inverted. If you don’t understand, look at the following pictures

flex-wrap

Flex -wrap: wrap-reverse: it’s the other way around. Wrap starts with the first line on top and reverse with the last line on top.

3, flex-flow, this property can be used to concatenate the above two properties, such as flex-flow: row-rever wrap I don’t want to write that in detail

Context-content is clearly the alignment property of the container’s content. However, when it comes to content alignment, you need to look at the flex-direction value for which axis is aligned.

Flex-start: to align from left or up on the main axis; Flex-end: to start from the right or down on the main axis; Center: centered on the main axis; Space-between: to arrange the left and right ends or the upper and lower ends of the main axis space-around: to arrange the two sides of each item equally. As a result, the spacing between items is twice as large as the spacing between items and the border.Copy the code

The first three are easy to understand. What do the last two values mean

Align-content can be used for multiple lines of content, while align-items can be used for single or multiple lines of content, which makes it much clearer. Now take a look at the demo diagram of several property values

align-content

1, Order, set the order attribute is also related to sorting, order translation is “order”, so in the child item, after setting the order, change its value can change the order of the child item in the arrangement, the smaller the value, the more advanced, on the contrary, the larger the value, the more backward, see the following demo diagram

flex-grow

They all set 1, that is, everyone shares his father’s property equally. If the values are different, like 1, 1, 2, 1, then the term with the value of 2 is going to have twice as many places as the term with the value of 1, just look at the demo

flex-shrink

flex-basis

When a parent container is 400 wide, it has five children, each 50px wide, and one of the flex-basis Settings is 200px; When the sum of the widths exceeds the width of the parent container, no flex-wrap wrap will be scaled down.

5. Flex, which is short for flex-grow, flex-shrink, and flex-basis. The default value is 0. This property has two shortcut values: auto and None. Auto is preferred when building a project, because if assigned independently, the browser will calculate the correlation ratio and there is an error.

Flex default value == flex:0 1 auto;

Flex :none == 0 0 auto;

Flex :1; flex:1;

Align -self is a similar property to align-items in the parent container. It can define a different arrangement for a child item, that is, it can override aligh-items in the parent container. See the demo