Flex elastic box model, flex elastic

Flex elastic box model, flex elastic

Flex refers to the elastic layout, which is used to provide the maximum flexibility for the box model. It specifies the items in the container as the elastic layout, similar to float: left;

The advantage of float is that the container does not set the height and will adapt to the height based on the project. We all know that if the float attribute is set, the container will leave the Document Stream and need to clear the float, according to the height of the project.

The parent element is called a container, and the child element is called a project.

The horizontal direction is called the spindle, and the horizontal and vertical intersections are called the cross axis.

In flex, if the total width of the fruit element does not exceed the parent width, it will be arranged normally. In flex, if the total width of the fruit element exceeds the parent width, it will be evenly allocated according to the parent width, in addition, it is not affected by the border and padding. The following code sets display: flex, and items in the container are automatically left floating, and ul does not set the height,

 

Effect

Flex-direction attributes change determines the direction of the project (I .e. sub-elements) Arrangement

 

Row (default value) Horizontal Direction left to left as the starting point

The row-reverse horizontal direction is arranged at the right end point

Code

Effect

The vertical direction of column. The starting point is in the upper left corner.

Code

Effect

Column-reverse vertical direction, starting from below, similar to turning the child element

Code

Effect

Flex-wrap: This attribute is set for wrap. If the width of the child element exceeds the width of the parent element, a line break is generated.

As mentioned above, we have set dispay: flex. In flex, if the total width of the fruit element does not exceed the parent level, it will be arranged normally (in actual pixels ),

In flex, if the total width of the fruit element exceeds that of the parent element, the width is equal to the width of the parent element (by percentage, in addition, it is not affected by the border and padding. Sometimes, even if the width of the child element exceeds the width of the parent element, we want to wrap the child element according to the actual pixel instead of the percentage, then we can set flex-wrap. The total width of the child element under wrap obviously exceeds the total width of the parent element, and the excess is arranged according to the percentage of the parent element width, the actual width of the child element is invalid.

 

Effect

 

In this case, even if the width of the child element exceeds the width of the parent element, the actual width of the child element is arranged without percentages. Here we can set flex-wrap: you can use the wrap attribute.

 

The effect is as follows:

As you can see, if flex-wrap: wrap is set, the width of the child element exceeds the width of the parent element. The child element is arranged according to the actual width of the child element, and the line feed is displayed.