简介
Flexbox 布局（又称Flex布局，弹性盒子布局）提供了一个有效地布局与对齐方式，能够使容器分配好子元素之间的空间（子元素大小未知或动态变化情况下仍然可以）
基础知识和术语
flex 容器
css中 display:flex 的就是创建容器，容器默认是呈现为块状元素，如果容器行呈现为行内元素 dispaly的值设为 inline-flex。容器会控制所有直属子元素，但不控制孙元素。
display: flex;
display: inline-flex;
flex 项
容器子的直属元素称为项目
轴线
main-start 主轴开始位置，main-end 主轴结束位置
cross-start 交叉轴开始位置，cross-end 交叉轴结束位置
cross axis 项占据主轴的宽度或高度
cross size 项占交叉轴的宽度或高度
flex项会沿着主轴方向进行排布
flex项会沿着主轴方向进行排布
flex 容器属性
flex-direction【控制主轴方向】
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
flex-wrap【控制主轴换行】
⚠️注意：使用wrap-reverse时，第一行会紧贴容器底部，而不是紧贴容器顶部
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
flex-flow
justify-content【控制主轴对齐方式】
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
align-items【控制交叉轴对齐方式】
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: baseline;
align-content【控制多轴线对齐方式】
⚠️注意：当只有一行 flex 项时，此属性不起作用
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: stretch;
align-content: space-between;
align-content: space-around;
flex 项目属性
order【控制项目在容器中的排列顺序】
数值越小，排列越靠前，默认为0
order: 0;
flex-grow【定义项目占容器的空间的比例】
⚠注意：负值无效
flex-grow: 0;
flex-shrink【定义了项目的缩小比例】
⚠注意：负值无效
默认为1，即如果空间不足，该项目将缩小，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-shrink: 0;
flex-basis
flex-basis: 0;
flex【flex-grow, flex-shrink 和 flex-basis的简写】
默认值为0 1 auto。后两个属性可选
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性
align-self【设置单个项目有与其他项目不一样的对齐方式】
⚠注意：float,clear和vertical-align 对 flex 项没有任何作用
可覆盖align-items属性。为auto时表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
