弹性布局为盒模型提供了很多常见场景的解决方案，比如居中，左右排列。
理解弹性布局，首先要明确弹性布局中重要的两根坐标轴：主轴和交叉轴，默认是水平排列，因此默认的主轴是水平轴，交叉轴式垂直轴。每个轴都有它的起点和终点，每一项都要在主轴上和交叉轴上分别占据空间。
Flex布局的属性分为容器属性和项目属性。
容器属性
flex-direction
主轴上的项目排列方向，默认值row
flex-direction: row
flex-direction: column
flex-direction: row-reverse
flex-direction: column-reverse
flex-wrap
默认情况下，所有的项目都会水平或者默认排列在主轴上，如果排列不下，默认滚动，flex-wrap 定义了在主轴排列不下时，项目如何排列， 默认nowrap
flex-wrap: wrap
换行，第一行在上方
flex-wrap: nowrap
不换行
flex-wrap: wrap-reverse
换行，第一行在下方
flex-flow
flex-flow是flex-direction+flex-wrap, flex-flow: <flex-direction> || <flex-wrap>;
justify-content
定义了项目整体在主轴上的对齐方式，默认值为flex-start
justify-content: center
justify-content: flex-start
justify-content: flex-end
justify-content: space-around
justify-content: space-between
justify-content: space-evenly
align-items
定义每一行在交叉轴上的对齐方式，默认值为stretch
-
align-items: stretch
-
align-items: flex-start
-
align-items: flex-end
-
align-items: center
-
`align-items: baseline
每一行项目的第一行文字的基线对齐·
align-content
定义项目整体在交叉轴上的对齐方式，默认值为flex-start
-
align-content: flex-start
-
align-content: flex-end
-
align-content: center
-
align-content: stretch
-
align-content: space-around
-
align-content: space-between
-
align-content: space-evenly
项目属性
order
数值越小，排列越靠前，默认值为0，假设将第五个元素order设为1，其在整体的项目（非单行）排列中变成最后一个。
flex-grow
当存在剩余空间时，项目的放大比例，默认为0，即即使存在剩余空间，也不放大。如果将第一个元素的flex-grow设为0.1，意味着假设存在剩余空间，它在主轴上的尺寸将设置为1.1倍和剩余空间的最小值。如果所有项目的flex-grow一致，将平等分配剩余空间，若其余项目均为1，某一个是2，那么他分配的剩余空间将是其余的两倍（不会优先保证自身尺寸的两倍）
flex-shrink
定义了空间不足时，项目的缩小比例，默认值为1
当空间充足时，可以看出，每个项目的宽度大致为200px。
当空间严重不足时，可以看出，每个项目的最小宽度为100px。
因此flex-shrink默认值1意味着，当空间不足时，最多压缩一倍的尺寸。当所有的项目flex-shrink值相同时且大于0，空间不足，大家等比例缩小；如果所有的项目flex-shrink都为0，空间不足时，大家都不缩小；如果只有一个为0，其他都大于零，那么只有为0的不缩小；小于零无效。
flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
-
flex-start
-
flex-end
原文链接：https://juejin.cn/post/7215452609112506423 作者：Sue1024
