Detailed explanation of flex layout in CSS

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

Several ways to declare flexible boxes

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

.box{ display:flex;}

Inline elements can also be used:

display:inline-flex;

Changing the direction of a flex element

The default direction of the elastic box is from left to right. The axis is horizontal. The default attribute of flex-direction is row

.box{ display:flex;}

You can modify flex-direction

Attributes to change the arrangement direction, that is, to change the axis to the vertical direction

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

You can also reverse it by changing the property to column-reverse , row-reverse

Same reason

Controlling elastic box overflow

If there are too many elements in the box and the horizontal width or height is not enough, the default situation is to reduce the width of the elements in the box.

We can solve this by wrapping the line here

Adding flex-wrap to the box can wrap the overflowed part downwards

Similarly, adding reverse after the wrap attribute can achieve the effect of wrapping from the bottom line.

The same goes for the horizontal and vertical axes.

We can also use flex-flow to set the direction of the axis and whether to wrap at the same time

Main axis and cross axis

Without further ado, let’s look at the pictures:

When the width is not enough and the element overflows and causes line wrapping, there will be a cross axis:

When the property is flex-idrection:column , the main axis is vertical and the cross axis is perpendicular to the main axis.

Arrangement of the main axis

The property that controls the main axis is justify-content

The following takes the horizontal direction as an example

1. The whole body is on one side

The default method is to align to the start from left to right on the main axis, that is, justify-content:flex-start

If it is aligned to the end, it is justify-content:flex-end

If the main axis is reversed, from right to left, then the start is on the right and the end is on the left

2. Center the whole: justify-content:center

3. Left and right sides, center in the middle: justify-content:space-between

4. The elements have the same spacing on both sides: justify-content:space-around

5. Justify-content:space-evenly

Cross axis arrangement

The property that controls cross-drawing is align-centent

1. The whole body is on one side

Similar to the main axis, flex-start is the start of the cross axis, flex-end is the end of the cross axis.

2. Overall centering: align-content:center

3. The cross axis is close to the edge, and other elements are evenly spaced: justify-content:space-between

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

5. Even spacing between cross-axis elements: justify-content:space-evenly

Controlling individual elements within a flexbox

1. align-self

align-self property allows you to control individual elements, similar to how you control the main axis as a whole.

2. Element available space allocation: flex-grow

The flex-grow attribute refers to the proportion of child elements allocated to the parent box.

If both are 1:

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

Dynamically shrink elements

The dynamic shrinkage of an element is controlled by flex-shrink property. When the total width of your internal elements is greater than the width of your external elements, and wrap is not used to wrap them, you can use flex-shrink to control the scaling of the internal elements.

0 means no zooming. The larger the value, the greater the zooming.

Flex-basis of the main axis

Set the base size of the element inside the box flex-basis , which has a higher priority than the width and height set by CSS

How to write elastic element attribute combinations

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

Equivalent to

flex:1 2 100px;

Summarize

This is the end of this article about the detailed explanation of flex layout in CSS. For more relevant CSS flex layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!