• 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就可以解决。

  • 相关阅读:
    (Eclipse) Selection does not contain main type
    Spring Web Flow 学习笔记(2)-流程的组件
    Spring Web Flow 学习笔记(1)
    快速排序java实现
    二路归并排序
    剪切板
    Java中空白final
    对象引用和对象
    Java复用类
    Experimenrs on Foursquare
  • 原文地址:https://www.cnblogs.com/tzzf/p/9135573.html
Copyright © 2020-2023  润新知