flex 布局

flex 布局重点难点

关于 flex

flex属性各种写法

flex 的缩写： flex-grow、flex-shrink、flex-basis 既 flex: flex-grow flex-shrink flex-basis
1.默认不写 flex 的情况下为：
flex: 0 1 auto;

2.当 flex 取值为数字时, 代表 flex-grow 的值：
flex: 1; 既 flex: 1 1 0%;

3.当 flex 取值为长度或则百分比时，表示 flex-basis 的值。flex-grow 取 1， flex-shrink 取 1
flex: 20px; 即 flex: 1 1 20px;

4.当 flex 取值为两个数字，则两值视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%
flex: 1 2; 即 flex: 1 2 0%;

5.当 flex 取值为 auto，则值为 1 1 auto
flex: auto; 即 flex: 1 1 auto;

6.当 flex 取值为 none 时，basis 为0%；
flex: none; 即 flex: 0 0 auto;

7.当 flex 取值为一个数字和一个长度或百分比，则为 flex-grow 和 flex-basis 的值，flex-shrink 取 1

flex:1 20px; /*等价于*/ flex:1 1 20px;
flex:1 20%; /*等价于*/ flex:1 1 20%;

重要总结

1. 当 flex 取值为 none 或者默认不写时，flex-grow 为 0， 其他情况都有值；
2. 当 flex 取值为 none 时，flex-shrink 为 0，其他情况都有值；
3. 当 flex 为数字或者两数字时，flex-basis 为 0%，其他情况都有值(包括 auto)

flex-basis

flex-basis 意思是元素的初始长度

重要总结：

1. 当 flex-basis 有值的情况下，basis 的权重大于 widht
2. 他的百分比是相对容器的
3. 当 flex-basis 为 auto 时，有 width 就是取 width， 没有就是内容宽度

flex-grow

flex-grow 属性用于设置或检索弹性盒子的扩展比率。如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。
计算规则：newWidth = width - ((flex-grow) / sum(flex-grow))*parentWidth

flex-shrink

只有在子容器大于父容器宽度才会发生作用
计算规则会计算 item 的宽度比例

align-item 和 align-content

重要总结：

1. align-items不管父有没有高，单行还是多行，都会生效，注意它的基本单位是每一个子项（每个元素），以元素为单位的，它会将交叉轴上的多余空间按行数平均分给每行，所以每行的高度是平均分给每行的高度+每行子元素最高的高度，然后每个元素在这个高度范围内进行flex-start flex-end center等进行布局！
2. align-content的基本单位是每行，每行的高度是一行中最高元素的高度，一定是在 flex-wrap: wrap（不管单行还是多行） 且父有固定高度时候才会生效！，它的对齐方式和主轴justify-content对齐方式相似！