容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
主要记住 “容器”、“项目”、“主轴（横轴）”和“交叉轴（纵轴）”的意思和指向就行。
可以理解成x轴和y轴。
flex-direction 决定主轴的方向（即项目的排列方向）。它有4个可能的值 ：
row（默认值）：主轴为水平方向，起点在容器的左端。
flex: 2;
如果只包含一个值，代表flew-grow
/* Three values: flex-grow | flex-shrink | flex-basis */
flex-grow属性定义项目的放大比例，默认为0。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
如果container容器设置的flex-wrap则不存在空间不足的情况，如果超过会自动换行。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
语法：
/* Keyword values */
flex: auto;
flex: initial;
flex: none;
/* One value, unitless number: flex-grow */
flex: 2;
/* One value, width/height: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Global values */
flex: inherit;
flex: initial;
flex: unset;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
一些简写模式
单个数字
1：In this case it is interpreted as flex: 1 1 0; the flex-shrink value is assumed to be 1 and the flex-basis value is assumed to be 0.
Two-value syntax:
第一个值：必须是数字，被解析成flex-grow
第二个值：要么是数字，被解析成flex-shrink, 要么代表width，被解析成flex-basis.
2021年3月18日更新
学习网站：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
目的：提供一种更加高效的方式来进行布局，对齐和为container内的元素分配space, 即使这些元素的尺寸未知或者是动态变化的。
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
Flex layout的理念是，赋予容器能够修改其元素宽度，高度和顺序的能力，达到采用最佳方式填充容器可用空间的能力，并且在各个类型的设备和屏幕尺寸上均有良好的显示效果。
Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
Flex layout并不依赖于direction，这一点和普通的布局方式不同。比如Block是基于垂直方向，而inline基于水平方向。当一个复杂应用发生了orientation变化，尺寸变化，拉伸或缩小时，Block和Inline这种布局方式缺乏足够的应对能力。
Items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).
Flex items可以随着 main axis 布局，也可以随着 cross axis布局。
main axis – The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below).
Main axis的主轴：不需要一定是水平方向。主轴的方向取决于flex-direction属性。
main-start | main-end – The flex items are placed within the container starting from main-start and going to main-end.
Flex items从main-start到main-end进行布局。
