flex常见问题理解

flex

1.align-items: stretch;拉伸

当 flex-direction: row; 水平按行排列时，项目没有设置高度或者高度为 auto 时，align-items: stretch; 会拉伸项目，高度占满容器。当 flex-direction: column; 按列排列时，项目没有设置宽度或者宽度为 auto 时，align-items: stretch; 会拉伸项目，宽度占满容器。

2.justify-content:space-around/space-evenly

相同点，元素与元素之间对距离是一样的，区别是space-around，是二分之一的元素之间距离，space-evenly是和元素宽度一致

3.f lex-grow:flex的盒子里面，与自身宽度剩余空间给元素的比例

默认为0，如果有父盒子（1000p x）四个盒子，a,b,c,d,自身宽度都是为100px，其中，设a为1，b为2，那么a的宽度是100+（1000-400）X（1/3），b的宽度就是100+（1000-400）X（2/3）

4.flex-shrink:收缩的比例，只有flex的盒子里面的元素大于父才会生效。默认是1.代表压缩，0是不压缩

压缩计算公式：父400px，两个孩子一个200px一个300px，其中如果200px的设置flex-shrink:0,那么300px的是flex-shrink:1，那么300px压缩100px，要是都为flex-shrink:1，算出剩余宽度100px，第一个比例是200/(200+300)，第二个比例是300/(200+300)那么第一个子项的宽度200-200/(200+300)X100，第二个是300-300/(200+300)X100。

5.flex-basic子项在容器主轴方向上的初始大小，

优先级为min-width/max-width > flex-basis > width。

意思就是你可以直接改这个属性覆盖width。

width只是flex-basis为auto时候间接生效，其余时候使用优先级更高的flex-basis属性值；

flex子项元素尺寸还与元素内容自身尺寸有关，即使设置了flex-basis属性值；

flex-basis数值属性值和width数值属性值不要同时使用；

flex-basis还支持很多关键字属性，只不过目前兼容性不太好；

flex-basis使用得当可以实现类似min-width/max-width的效果

6.align-self:单个设置，可以覆盖align-item的值，默认auto,

7.flex：1:flex-grow:1;flex-shrink:1;flex-basis:0%

flex: 1; 等同于 flex: 1 1 0%；（剩余的多会拉伸剩余的少会缩小）

flex: 0; 等同于 flex: 0 1 0%; （剩余的多不会拉伸剩余的少会缩小）

flex: none; 等同于 flex: 0 0 auto; （剩余的多不会拉伸剩余的少不会缩小）

flex: auto; 等同于 flex: 1 1 auto; （剩余的多会拉伸剩余的少会缩小）。

那么flex: 1，和flex: auto就在于1，会没有宽度了，只占一个字符串，而flex: auto有自身的大小。