现在来总结下自己在项目中用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就可以解决。