Source: https://blog.csdn.net/liveinmylife/article/details/51838939
1. What is flex layout?
Official statement: Flex is the abbreviation of Flexible Box, which means "flexible layout", which is used to provide maximum flexibility for the box model. Any container can be specified as a Flex layout.
Folk saying: flex is a layout method, similar to block, inline-block, etc.
2, the concepts involved in flex
The basic function of Flex is to make the layout simpler, such as "vertical centering", etc. Of course, it is more than this. To explain what flex does, you must first understand some concepts.
Elements that use Flex layout are called flex containers, or "containers" for short. All its child elements automatically become container members, called flex items (flex items), or "items" for short.
The container has two axes by default: the horizontal main axis (main axis) and the vertical cross axis (cross axis). The starting position of the main axis (the intersection with the border) is called main start, and the ending position is called main end; the starting position of the cross axis is called cross start, and the ending position is called cross end.
Items are arranged along the main axis by default. The main axis space occupied by a single item is called main size, and the cross axis space occupied by it is called cross size.
Mainly remember the meaning and direction of "container", "item", "main axis (horizontal axis)" and "cross axis (vertical axis)".
3, the properties of the container
3.1 flex-direction
flex-direction determines the direction of the main axis (that is, the direction in which items are arranged). It has 4 possible values:
row (default): the main axis is horizontal, and the starting point is at the left end of the container. 
row-reverse: The main axis is horizontal, and the starting point is at the right end of the container. 
column: The main axis is the vertical direction, and the starting point is the upper edge of the container. 
column-reverse: The main axis is vertical, and the starting point is the lower edge of the container.
3.2 flex-wrap
By default, all items in the container are arranged on a line, and flex-wrap defines how to wrap if a line does not fit. It has three possible values:
nowrap (default): Do not wrap. 
wrap: wrap, the first line is above. 
wrap-reverse: wrap, the first line is below.
3.3 flex-flow
The flex-flow property is a shorthand for the flex-direction property and the flex-wrap property. The default value is row nowrap.
3.4 justify-content
justify-content defines the alignment of items on the main axis. It has 5 possible values:
flex-start: align to the starting position of the main axis, that is, align from the starting position of the main axis. If the direction of the main axis is changed using the flex-direction property, the corresponding arrangement of items will also change.
.container{
display: flex; flex-direction: row; justify-content: flex-start; }- 1
- 2
- 3
- 4
- 5
.container{
display: flex; flex-direction: row-reverse; justify-content: flex-start; }- 1
- 2
- 3
- 4
- 5
flex-end: Align to the end of the main axis, that is, start from the end of the main axis. Like flex-start it is also related to flex-direction.
.container{
display: flex; flex-direction: row; justify-content: flex-end; }- 1
- 2
- 3
- 4
- 5
center: center
.container{
display: flex; flex-direction: row; justify-content: center; }- 1
- 2
- 3
- 4
- 5
space-between: If there are more than two items, the start and end positions of the main axis of the container will be one each, and the other items will be evenly arranged with equal intervals between items. Sort order is also related to flex-direction. If there are only two items then one on each side. If there is only one item, only arrange 
space-around at the beginning of the container's main axis: equal spacing on both sides of each item. So, the spacing between items is twice as large as the spacing between items and the border. Sort order is also related to flex-direction. If there is only one item, it is arranged in the middle. 
3.5 align-items property
The align-items property defines how items are aligned on the cross axis (vertical axis). It may take 5 values. The specific alignment is related to the direction of the cross axis. The following assumes that the cross axis is from top to bottom.
flex-start: The starting point of the cross axis is aligned. 
flex-end: The end point of the cross axis is aligned. 
center: The midpoint of the cross axis is aligned. 
baseline: The baseline alignment of the item's first line of text. 
stretch (default): If the item has no height or is set to auto, it will fill the height of the entire container.
3.6 align-content property
The align-content property defines the alignment of multiple axes (multiple lines). This property has no effect if the item has only one axis (one line).
If the value of flex-direction is column, this property defines the alignment of multiple columns. If the item has only one column, this property does not matter.
stretch (default): Multiple lines occupy the entire cross axis. 
flex-start: Align with the start of the cross axis. 
flex-end: Align with the end point of the cross axis. 
center: Align with the midpoint of the cross axis. 
space-between: Align with both ends of the cross axis, and the spacing between the axes is evenly distributed. 
space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between the axes is twice as large as the spacing between the axes and the frame.
The properties of the project
4.1 order attribute
.item {
order: <integer>; }- 1
- 2
- 3
The order property defines the order in which items are sorted. The smaller the value, the higher the ranking, the default is 0.
4.2 flex-grow property
.item {
flex-grow: <number>; /* default 0 */ }- 1
- 2
- 3
- 4
The flex-grow property defines the enlargement ratio of the item, which defaults to 0. 
If the value of flex-grow for all items is the same, then the width on the main axis is evenly distributed with the width of the item as the minimum value. If the item does not have width set, all items bisect the remaining width (excess space) on the main axis.
If the value of item's flex-grow is different, it is to allocate the remaining width (excess space) on the main axis according to the corresponding ratio. Similarly, the width set by item is the minimum value.
If the item is set to max-width, the enlarged width will not exceed this value.
4.3 flex-shrink property
The flex-shrink property defines the shrink ratio of the item, the default is 1, that is, if there is not enough space, the item will shrink.
.item {
flex-shrink: <number>; /* default 1 */ }- 1
- 2
- 3
If the flex-shrink property of all items is 1, when there is insufficient space, they will be proportionally reduced. If the flex-shrink property of one item is 0 and the other items are 1, the former will not shrink when there is insufficient space.
If the flex-wrap of the container container is set, there is no shortage of space, and if it exceeds, it will automatically wrap. So setting flex-shrink at this time doesn't work either.
Negative values are invalid for this property.
4.4 flex-basis properties
The flex-basis property defines the main size an item occupies before allocating excess space. Based on this property, the browser calculates whether there is excess space on the main axis. Its default value is auto, which is the original size of the item.
.item {
flex-basis: <length>|auto; /* default auto */ }- 1
- 2
- 3
It can be set to the same value as the width or height property (eg 350px), and the item will occupy a fixed space.
4.5 flex properties
The flex property is shorthand for flex-grow, flex-shrink and flex-basis, with a default value of 0 1 auto. The last two properties are optional.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }- 1
- 2
- 3
This property has two shortcut values: auto (1 1 auto) and none (0 0 auto).
It is recommended to use this property in preference to writing three separate properties, because the browser will infer the relevant value.
If the sum of flex-basis is greater than the parent's width, the child is compressed, and the final choice is flex-shrink for the compression calculation
weighted value = son1 + son2 + .... + sonN;
Then the calculation formula after compression is
Compressed width w = (child flex-basis value * (flex-shrink)/weighted value) * overflow value
If the sum of flex-basis is less than the parent width, the remaining width will be percentage based on the sum of flex-grow values;
Expanded width w = (child element flex-grow value / sum of all child elements flex-grow) * remaining value
4.6 align-self property
The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which means inheriting the align-items property 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; }