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的布局会让子容器的float、clear和vertical-align属性将失效。这里就有个小坑就是图片因为有基线的存在，会有一些间隙（这个只有有空写下），不过设置图片的display为block就可以解决。