1. Basic knowledge of flex layout
⑴ Flex elastic layout. Any HTML element can be specified as a flex layout.
Display:inline-flex; The flex container is an inline-block element
Display: flex ; the flex container is a block-level element
⑵ Flex container: The element that adopts flex layout is called flex container.
⑶ Flex item: All sub-elements of the flex container automatically become members of the container, called flex items.
⑷ By default, the horizontal axis is the main axis, and the axis perpendicular to the main axis is the cross axis.
Flex items are aligned along the main axis by default.
2. Properties of the flex container
//1.flex-directon属性
// 决定主轴的方向（即flex项目的排列方向）
// flex-direction: row;(默认值，主轴为水平方向，起点在左端)
// flex-direction: row-reverse;(主轴为水平方向，起点在右端)
// flex-direction: column;(主轴为垂直方向，起点在上沿)
// flex-direction: column-reverse;(主轴为垂直方向，起点在下沿)
//2.flex-wrap属性
//默认情况下，flex项目都排列在一条轴线上
// flex-wrap:nowrap;(默认不换行)
// flex-wrap:wrap;(换行，第一行在上方，也就是从上往下排)
// flex-wrap:wrap-reverse;(换行，第一行在下方，也就是从下往上排)
//3.flex-flow
// flex-directon和flex-wrap的简写形式
// flex-flow:<flex-directon>||<flex-wrap>;(默认值为row nowrap)
//4.justify-content
// 定义了flex项目在主轴上的对齐方式
// justify-content：flex-start;(默认值，左对齐（flex-direction: row）)
// justify-content：flex-end;(默认值，右对齐（flex-direction: row-reverse）)
// justify-content: center;(水平居中)
// justify-content: space-between;(两端对齐，flex项目之间的间隔都相等)
// justify-content: space-around;(每个flex项目两侧的间隔都相等，
// 所以，项目之间的间隔比边框的间隔大一倍)
//5.align-items
// 定义了flex项目在交叉轴上的对齐方式
// align-items：stretch;(默认值，若flex项目未设置交叉轴方向（高度）的大小或者设为auto，将占满整个容器交叉轴方向的大小)
//align-items：flex-start;(交叉轴的起点对齐)
//align-items：flex-end;(交叉轴的终点对齐)
//align-items：center;(交叉轴的中点对齐，垂直居中)
//align-items：baseline;(flex项目的第一行文字的基线对齐)
//6.align-content
//定义了存在多根主轴线时，flex项目在交叉轴上如何对齐
// 如果项目只有一根主轴线，该属性不起作用
// align-content：stretch；(默认值，主轴线平分flex容器交叉轴方向上的 空间)
// align-content：flex-start;(交叉轴的起点对齐)
// align-content：flex-end;(交叉轴的终点对齐)
// align-content：center;(交叉轴的中点对齐，整体垂直居中)
// align-content：space-between;(flex项目之间的间隔都相等)
// align-content：space-around;(每个flex项目两侧的间隔都相等
// 所以，项目之间的间隔比边框的间隔大一倍)
3. Properties of Flex Items
① order
Defines the arrangement order of flex items, the smaller the value, the higher the arrangement, the default is 0
② flex-grow
Defines the magnification ratio of the flex item in the direction of the main axis, and the default is 0, that is, if there is remaining space, the item will not be magnified. If the flex-grow property of all items is 1, they will equally divide the remaining space (if any); if the flex-grow property of all items is 2, and the other items are 1, the remaining space occupied by the former will be smaller than Other items are doubled; if some flex items have flex-grow attributes, some do not, but have width attributes, then the items with flex-grow attributes will divide the remaining space equally
③ flex-shrink
Defines the reduction ratio of the flex item in the main axis direction, the default is 1, that is, if there is insufficient space, the item will shrink. If the flex-grow property of all items is not 0, when the space is insufficient, they will be reduced proportionally; if the flex-grow property of one item is 0, and the other items are 1, when the space is insufficient, the former will not shrink
④ flex-basis
Defines the size of the main axis (main size) occupied by flex items before allocating excess space. The browser calculates whether there is extra space in the main axis according to this attribute. The default value is auto, which is the original size of the item.
⑤ flex
Shorthand for flex-grow , flex-shrink, and flex-basis.
flex：<flex-grow>||<flex-shrink>||<flex-basis>;
This attribute has two shortcut values: auto (1 1 auto) and none (0 0 auto)
⑥ align-self
Allows individual items to have a different alignment than other items, overriding the align-items property.