Learn Flex Layout in 30 minutes

Why am I writing this tutorial on flex layouts?
Because it is very simple and flexible, you can realize the layout of various pages with just a few lines of code. When I was learning page layout, I was deeply troubled by its float, display, and position attributes. However, to learn Flex layout, you only need to learn a few CSS properties to write simple, elegant and complex page layouts.

This tutorial is suitable for people who:
Front-end Xiaobai, I don’t know much about page layout skills, but I want to learn how to do page layout through simple learning
Learned but not very familiar with Flex layout, need tutorials to consolidate and review the knowledge points of Flex layout
The project does not consider compatibility with low-version IE browsers, and wants to write beautiful page layouts simply and elegantly
No more nonsense, I will try my best to describe the Flex layout in concise and clear words, and you will gain after reading it.

Basic concepts of Flex:

There are two axes by default in the flex container, the horizontal main axis (main axis) and the vertical cross axis (cross axis). This is the default setting. Of course, you can change the vertical direction to the main axis and the horizontal direction to the cross axis , we will talk about this later.

Each unit block in the container is called a flex item, and each item occupies the space of the main axis (main size), and the space of the cross axis is (cross size).

It needs to be emphasized here that you cannot preconceive that the width is the main size and the height is the cross size. This also depends on the direction of your main axis. If your vertical direction is the main axis, then the height of the item is the main size.

Flex container:
First of all, to implement flex layout, you need to specify a container first, and any container can be topped as a flex layout, so that the elements inside the container can use flex for layout.

.container {
display: flex | inline-flex; //can have two values
}
Generates a block or inline flex container box respectively. Simply put, if you use block elements like divs, you can use flex, and if you use inline elements, you can use inline-flex.

It should be noted that after the flex layout is set at that time, the float, clear, and vertical-align properties of the child elements will be invalid.

There are the following six properties that can be set on the container, they are:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1. flex-direction: Determine the direction of the main axis (that is, the direction in which items are arranged)

.container {
flex-direction: row | row-reverse | column | column-reverse;
}
Default value: row, the main axis is the horizontal direction, and the starting point is at the left end.

071308435418fe8b50e53065651ceffe095e97d1
row-reverse: the main axis is horizontal, and the starting point is at the right end
42d5f86506850a56bedd4481be29a0f03a8ee214
column: the main axis is vertical, and the starting point is on the upper edge

15d4c58e9e7ad6c93edd58317e2d285c956eb8f7

column-reverse: the main axis is vertical, and the starting point is at the bottom

43e8c5dc8ab5b7a45879f90fee4a3c64db472dc9

2. flex-wrap: Determine whether the items in the container can wrap

By default, items are arranged on the main axis, and flex-wrap can be used to wrap items.

.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
Default value: nowrap does not wrap, that is, when the main axis size is fixed, when there is insufficient space, the item size will be adjusted accordingly without being squeezed to the next line.

3cea30e0005a60f46b6ab89bf5523965eb63ff14

wrap: Wrap when the total size of the main axis of the item exceeds the container, the first line is above

f4fd7741393db164318eb9f79679d100000a8a0a

wrap-reverse: wrap, the first line is below

a639cce939a5b330b60e2f0f0dc62c0c4ebb199d

3. flex-flow: shorthand for flex-direction and flex-wrap

.container {
flex-flow: || ;
}
The default value is: row nowrap, it feels useless, just write it separately honestly. This way you don't have to remember this attribute.

4. justify-content: defines the alignment of the item on the main axis.

.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
Built to test when the main axis is horizontal, ie flex-direction: row

b6cb897f0aef7c7a05b4b8f25f7a3a390eff9448

150d4a8aaad88550bda32fa23cf0b0afa03c12ac

5. align-items: Defines the alignment of items on the cross axis

.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
Built to test when the main axis is horizontal, ie flex-direction: row

The default value is stretch, that is, if the height of the item is not set or set to auto, it will occupy the height of the entire container.

7dfb6558b4ed8bfeff3256a2409efc7d5a7263fd

Assuming that the height of the container is set to 100px, and the height of the item is not set, the height of the item is also 100px.

flex-start: The starting point of the cross axis is aligned

25e9b516ffde16c87d75c8bd0e16a5b4484f0fc9

Suppose the height of the container is set to 100px, and the items are 20px, 40px, 60px, 80px, 100px, as shown above.

flex-end: Align the end of the cross axis

0e4eaf529c1f1f10dc7016a3fa33691cc29d29b8

center: Align the midpoint of the cross axis

e5c28e495822fa7901515131e2d1686950d8e46f

baseline: the baseline alignment of the first line of text in the item

4783ec8ee866d4ac7faf3fa74b8c7c07f768324b

It is mainly based on the bottom of the text, which can be understood by looking at the picture carefully.

6. align-content: defines the alignment of multiple axes, if the project has only one axis, then this attribute will not work

.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
This is understood like this:

When your flex-wrap is set to nowrap, there is only one axis in the container, because the items will not wrap, and there will be no multiple axes.

When your flex-wrap is set to wrap, there may be multiple axes in the container. At this time, you need to set the alignment between multiple axes.

Built to test when the main axis is horizontal, ie flex-direction: row, flex-wrap: wrap

The default value is stretch, which is easy to understand by looking at the picture below

e57aa97229c0eb73d5fe2630dfa6ee27926ad0e3

It can be seen from the figure that there are three axes (because the width of the container is limited), when the value is stretch, the three axes will equally divide the space in the vertical direction of the container.

It is worth noting that although the default value of the item on each axis is also stretch, since I set the height of each item, it does not stretch the entire container. If the project does not set a height, it will become like this:

e2759516a2ad3debed5c3c6f04fdeda70708b2a8

I also mentioned this earlier (align-items). The key point here is to understand that the three axes will equally divide the space on the vertical axis.

flex-start: The axes are all aligned at the starting point on the cross axis

3f62893aada41d3e53c3c41c5e3ba34847c033de

flex-end: The axes are all aligned at the end of the cross axis

947692c4275c19b830440f526ca54ce025e02c83
center: The axes are all aligned in the middle of the cross axis

b8e4cc6d8aefc0c0e8f08a6f18ef1e88bae51ec9
space-between: The axes are aligned at both ends, and the intervals between them are equal, that is, the remaining space is equally divided into gaps.

f4dff6d915dac250adf869c8a14c6e2b25c9e504
space-around: The spacing on both sides of each axis is equal, so the spacing between the axes is twice as large as the spacing between the axes and the edges.

229540852127cdf0a4d1b18096e643708f0e93cf
So far, all the properties on the container are finished. Next, let’s talk about the properties on the flex item.

Flex item properties:
There are six attributes that can be applied to item items:

order
flex-basis
flex-grow
flex-shrink
flex
align-self
1. order: Define the order in which items are arranged in the container, the smaller the value, the higher the arrangement, the default value is 0

.item {
order: ;
}
8c68d4870e5930ed5686b4e0c45b9f7a6185658b

In the HTML structure, although the items of -2 and -1 are arranged at the back, they can be arranged at the front due to the order being set respectively.

2. flex-basis: Defines the main axis space occupied by the item before allocating extra space. The browser calculates whether there is any extra space in the main axis according to this property.

.item {
flex-basis: | auto;
}
Default value: auto, which is the original size of the item. At this time, the width and height of the item depend on the value of width or height.

When the main axis is in the horizontal direction, when flex-basis is set, the width setting value of the item will be invalid. Flex-basis needs to be used in conjunction with flex-grow and flex-shrink to work.

When the flex-basis value is 0%, the item is considered to have zero size, so even declaring the size to be 140px is useless.
When the value of flex-basis is auto, then according to the set value of the size (if it is 100px), the 100px will not be included in the remaining space.
3. flex-grow: Define the magnification ratio of the item

.item {
flex-grow: ;
}
The default value is 0, that is, if there is remaining space, do not zoom in

2eb9c704ff1d12980017f47c4ec64fc853d7d732

When all the items are arranged according to the value of flex-basis, there is still room left, then flex-grow will come into play at this time.

If all items have a flex-grow property of 1, they will divide the remaining space equally. (if so)

If one item has a flex-grow property of 2 and the others have 1, the former will take up twice as much remaining space as the other items.

Of course, if you find that there is not enough space after all items are arranged with the value of flex-basis, and flex-wrap: nowrap, flex-grow will not work at this time, and the next attribute is needed at this time.

4. flex-shrink: defines the reduction ratio of the item

.item {
flex-shrink: ;
}
Default: 1, i.e. the item will shrink if there is not enough space, negative values have no effect on this property.

b10aeed2b843e5b1335a6c8d61793ce75c7e26d9

It can be seen here that although the width of each item is set to 50px, since the width of its own container is only 200px, each item will be reduced in the same proportion at this time, because the default value is 1.

In the same way:

If the flex-shrink property of all items is 1, when the space is insufficient, they will be proportionally reduced.

If one item's flex-shrink property is 0 and other items are 1, the former will not shrink when there is insufficient space.

5. flex: shorthand for flex-grow, flex-shrink and flex-basis

.item{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
The default value of flex is a combination of the above three property values. Assuming that the above three properties also take default values, the default value of flex is 0 1 auto.

For shortcut values: auto (1 1 auto) and none (0 0 auto)

Regarding the value of flex, there are many special cases, which can be divided as follows:

When the value of flex is a non-negative number, the number is the value of flex-grow, flex-shrink is 1, and flex-basis is 0%. The following are equivalent:
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
When the value of flex is 0, the corresponding three values are 0 1 0%
.item {flex: 0;}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;
}
When the value of flex is a length or a percentage, it is regarded as a flex-basis value, flex-grow takes 1, and flex-shrink takes 1, which are equivalent as follows (note that 0% is a percentage rather than a non-negative number)
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}

.item-2 {flex: 24px;}
.item-2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
When the value of flex is two non-negative numbers, it is regarded as the value of flex-grow and flex-shrink respectively, and the value of flex-basis is 0%. The following are equivalent:
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
When the value of flex is a non-negative number and a length or percentage, it is regarded as the value of flex-grow and flex-basis respectively, and flex-shrink takes 1, which are equivalent as follows:
.item {flex: 11 32px;}
.item {
flex-grow: 11;
flex-shrink: 1;
flex-basis: 32px;
}
It is recommended to use this attribute in preference to writing three separate attributes separately.

grow and shrink are a pair of twins, grow represents the stretch factor, and shrink represents the contraction factor.

grow works when the width sum of the child elements under the flex container is smaller than the container sum. grow defines the size growth factor of the sub-elements, and the remaining size after removing the sum of the sub-elements in the container will be divided equally according to the grow value of each sub-element to increase each sub-element.

In addition, thanks to @王嘉成 in the comment area to supplement the relationship between the flex-wrap of the container and the flex-shrink and flex-grow of the child:
When flex-wrap is wrap | wrap-reverse, and the width of the child item is less than the width of the parent container, flex-grow will work, and the child item will be enlarged according to the value set by flex-grow (items set to 0 will not be enlarged)
When flex-wrap is wrap|wrap-reverse, and the width of the child item exceeds the width of the parent container, the line must be wrapped first. After the line break, there may be remaining space at the right end of each line (the child items contained in the last line may be larger than the previous ones) There are few lines, so the remaining space may be larger), then flex-grow will work, if the flex-grow of all sub-items in the current line is 0, the remaining space will be reserved, if there is a flex-grow of a sub-item in the current line -grow is not 0, the remaining space will be occupied by children whose flex-grow is not 0
When flex-wrap is nowrap, and the width of the child item is less than the width of the parent container, flex-grow will work, and the child item will be enlarged according to the value set by flex-grow (items set to 0 will not be enlarged)
When flex-wrap is nowrap, and the width of the child item exceeds the width of the parent container, flex-shrink will work, and the child item will shrink according to the value set by flex-shrink (items set to 0 will not shrink). But there is a special case here, that is, when all sub-items of this row have flex-shrink of 0, that is to say, all sub-items cannot be shrunk, and an annoying horizontal scroll bar will appear
Summarizing the above four points, it can be seen that no matter what the situation is, only one of flex-shrink and flex-grow can work at the same time. The reason for this is very simple when you think about it: when there is enough space, flex-grow When there is room to play, and when there is not enough space, flex-shrink can help. Of course, when the value of flex-wrap is wrap | wrap-reverse, it indicates that line breaks are possible. Since line breaks are possible, there is always enough space in general, and flex-shrink will of course not work.
6. align-self: Allows a single item to have a different alignment from other items

Individual items override properties defined by align-items

The default value is auto, which means inheriting the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
This is the same as the align-items attribute, except that align-self is valid for a single item, while align-items is valid for all items under the container.

ade4fdad71d9788c76e26dca1857c72688ea33d1

The container align-items is set to flex-start, while the third item has an align-self value of flex-end.