是对 最新最详细flex布局-彻底掌握 的总结笔记。 flex 是 Flexible Box 的缩写，即为弹性盒子布局，用于解决元素居中问题，能够自动弹性伸缩，适配不同大小的屏幕和移动端。
flex布局模型
主轴：main axis 开始: main start 结束: main end 主轴长: main size
交叉轴: cross axis 开始: cross start 结束: cross end 交叉轴长: cross size
应用在flex item上的css属性
flex:flex-grow||flex-shrink||flex-basis的简写
flex-grow:决定flex items如何扩展
flex-basis：设置flex items在main axis方向上的base size
flex-shrink:决定flex items如何收缩
order:决定flex items的排布顺序
align-self:可以通过此属性覆盖flex container设置的align-items
应用在flex container上的css属性
flex-flow:flex-direction||flex-wrap的简写
flex-direction:决定主轴方向
flex-wrap:决定flex container是单行还是多行
justify-content:决定flex item在main axis上的对齐方式
align-items:决定flex items在cross axis上的对齐方式
align-content:决定多行flex items在cross axis上的对齐方式
flex各个属性详细解释
flex-direction 决定主轴方向
flex-items默认沿着主轴从main start开始往main end方向排布
row(默认)：主轴从左到右row-reverse:主轴从右到左column:主轴从上到下column-reverse:主轴从下到上
justify-content 决定flex item在main axis上的对齐方式
flex-start(默认):与main start对齐
flex-end:与main end对齐
center:居中对齐
space-between:flex items之间距离相等，与main start，main end两端对齐
space-evenly:flex items之间距离相等，flex items与main start，main end之间距离等于flex items之间的距离
space-around:flex items之间距离相等，flex items与main start，main end之间距离等于flex items之间的距离的一半
align-items 决定flex items在cross axis上的对齐方式
对单行多行都有效
normal:弹性布局中，效果和stretch一样stretch:当flex items在cross axis 方向的size为auto时，会自动拉伸至填充flex container（高度=container高度）
flex-start:与cross start对齐
flex-end:与cross end对齐
center:居中对齐
baseline:与基准线对齐(第一行文本基线)
flex-wrap 决定flex container是单行还是多行
nowrap(默认):单行（放不下时收缩item，不换行）
wrap:多行
wrap-reverse:多行（对比wrap，cross start与cross end相反)
flex-flow 是flex-direction||flex-wrap的简写 例：flex-flow:row-reverse wrap; align-content 决定多行flex items在cross axis上的对齐方式（对单行无效果） 例：当flex items为单行时设置
align-content: flex-end;效果如下
由此可知
align-content对单行无效果
stretch(默认值):与align-items的stretch类似
flex-start:与cross start对齐
flex-end:与cross end对齐
center:居中对齐
space-between:flex items之间距离相等，与cross start，cross end两端对齐
space-around:flex items之间距离相等，flex items与cross start，cross end之间距离是flex items之间距离的一半
space-evenly:flex items之间距离相等，flex items与cross start，cross end之间距离等于items之间距离
order 决定flex items的排布顺序
可以设置任意整数（正整数，负整数，0），值越小越排在前面，默认值为0
当设置item5的order为-1时：
align-self 可以通过此属性覆盖flex container设置的align-items
以下效果和align-items一致
- auto(默认值):
- stretch
- flex-start
- flex-end
- center
- baseline
当
align-items: center;时设置item5align-self: flex-end;
flex-grow 决定flex items如何扩展
可以设置任意非负数字（正小数，正整数，0），默认值是0
当flex container在main axis方向上有剩余时，flex-grow属性才会有效
flex items扩展后的最终size不能超过max-width/max-height
计算公式：
1.计算剩余空间：容器大小-所有项目的总大小
2.计算将多少剩余空间拿来分配:剩余空间 * ( 所有项目的flex-grow之和 >= 1 ? 1 : 所有项目的flex-grow之和 )
3.计算每个项目分配到多少剩余空间:要分配的剩余空间 * ( 单个项目flex-grow / 所有项目的flex-grow之和 )
flex-shrink :决定flex items如何收缩
可以设置任意非负数字（正小数，正整数，0），默认值是0
当flex items在main axis方向上超过了flex container的size，flex-shrink才有效
flex items收缩后的最终size不能小于min-width/min-height
计算公式
1.计算超出空间：所有项目的总大小-容器大小
2.计算超出空间中多少用来压缩：超出空间 * ( 所有项目的flex-shrink之和 >= 1 ? 1 : 所有项目的flex-shrink之和 )
3.计算每个项目缩小多少空间：要压缩的空间 * ( 单个项目flex-shrink / 所有项目的flex-shrink之和 )
flex-basis 设置flex items在main axis方向上的base size
auto(默认值)- 具体的宽度数值
决定flex items最终base size的因素，从优先级高到低
max-width/max-height/min-width/min-height
flex-basis
width/height
内容本身的size
flex :flex-grow||flex-shrink||flex-basis的简写
