Detailed explanation of flex layout in CSS

Time:2020-5-20

Flex layout is also called elastic layout. Any container can be specified as flex layout

Several ways to declare elastic box

As mentioned earlier, all containers can be specified as flex layouts

.box{    display:flex;}

Inline elements can also use:

display:inline-flex;

Change the direction of elastic elements

The elastic box is from left to right by default, and the axis is horizontal,flex-directionThe default property isrow

.box{    display:flex;}

 

Can be modified byflex-direction

Property to change the direction of the arrangement, that is, to change the axis to a vertical direction

.box{    display:flex;    flex-deriction:column;}

 

You can also reverse and change the property tocolumn-reverse , row-reverse

Homology

 

Control the overflow of elastic box

If there are too many elements in the box and the horizontal width or height is not enough, the width of the elements in the box will be reduced by default

We can solve it here by wrapping lines

Add to the boxflex-wrap, the overflow part can be wrapped down

Also, add reverse after the wrap attribute to achieve the effect of line breaking from the lower network

The same is true for horizontal and vertical axes.

We can also passflex-flowSet the direction of the axis and whether to wrap at the same time

 

Principal axis and cross axis

Don’t talk much, just look at the picture:

When the width is not enough and the element overflows, leading to a line break, there is a cross axis:

When the property isflex-idrection:columnWhen the main axis is vertical, the cross axis is vertical to the main axis

Arrangement of spindles

The properties of the control spindle arejustify-content

Take the horizontal direction as an example

1、 Side by side

The default way is to align the spindle from left to right and to the beginning, that isjustify-content:flex-start

 

If alignment to end, yesjustify-content:flex-end

If the spindle reverses from right to left, the start is on the right and the end is on the left

2、 Overall center: justify- content:center

3、 Left and right sides, center: justify- content:space-between

4、 The left and right sides of the element have the same spacing: justify- content:space-around

 

5、 Average distribution: Justice- content:space-evenly

Arrangement of cross axis

The attributes that control cross pumping arealign-centent

1、 Side by side

Similar to the spindle,flex-startStart for cross axis,flex-endCross axis tail

2、 Overall center: align- content:center

3、 The head and tail of the cross axis are close to each other, and the average distribution of other elements is just- content:space-between

 

4、 The spacing between the cross axis elements is the same: justify- content:space-around

 

5、 Cross axis element spacing average:: justify- content:space-evenly

Control the individual elements in the elastic box

1、 Align self

adoptalign-selfAttribute, which can control individual elements, similar to the control of the whole spindle

 

2、 Element free space allocation: Flex grow

flex-growAttribute refers to the proportion of child elements allocated to the parent box

When they are all 1:

It can also be other proportion. If it is 0, it is the original size

 

Dynamic reduction of elements

Dynamic reduction of elementsflex-shrinkProperty control. When the total width of your internal element is greater than that of the external element, it is not applicablewrapTo wrap it, you can use flex shrink to control the scaling of internal elements.

0 means no scaling. The larger the value, the larger the scaling

Reference dimension of main shaft flex basis

Set the base dimension of the elements inside the boxflex-basis, priority is greater than the width and height set by CSS

 

Attribute combination of elastic elements


flex-grow:1;
flex-shrink:2;
flex-basis:100px;

Equivalent to

flex:1 2 100px;

summary

This article about detailed explanation of flex layout in CSS introduces this. For more information about CSS flex layout, please search previous articles of developepaer or continue to browse the following articles. I hope you can support developepaer in the future!