flex布局的一些注意点

现在来总结下自己在项目中用flex布局的一些注意点

1.ui图中的布局方式与justify-content的布局方法不一样

这是就要利用flex-grow的空dom来分开子容器来达到页面布局的效果

2.flex-grow的一个坑

当设置flex-grow的子容器的长度超级无敌长的时候,flex会压缩其他的子容器的长度。当然你肯定不希望其他的子容器被压缩,因此这时就需要设置其他子容器的flex-shrink属性为0,这样就不会被压缩。

3.flex只是比例,但不会换行

flex只能设置子容器之间的比例,但是不能让子容器换行,如果你需要它换行,我建议的是用设置子容器的宽度的百分比,来达到换行的效果。

4.用flex完全避免float的

flex基本可以完全取代float属性,所以如果用flex,就尽力它基本属性来取代float。

5.子容器的一些属性将会失效

flex的布局会让子容器的floatclearvertical-align属性将失效。这里就有个小坑就是图片因为有基线的存在,会有一些间隙(这个只有有空写下),不过设置图片的display为block就可以解决。

原文地址:https://www.cnblogs.com/tzzf/p/9135573.html