zoukankan      html  css  js  c++  java
  • 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就可以解决。

  • 相关阅读:
    使用Maven快速创建一个SpringMVC工程步骤
    签到
    yaml简介
    APP定位元素之UiSelector
    js中var、let、const区别
    用Jquery去写树结构
    正则相关的知识分享
    python常见问题
    Vue.js 的一些小技巧
    关于jsp删除成功,添加成功等之后 页面自动跳转的js写法
  • 原文地址:https://www.cnblogs.com/tzzf/p/9135573.html
Copyright © 2011-2022 走看看