• 首页
  • 关于我们
  • 新闻资讯
  • 产品展示
  • 荣誉展示
  • 联系我们
  • 在线留言
  • 13021256845
  • 您当前位置:首页 > 产品展示

    flex布局的学习思路

    时间:2019-09-21 09:29:13 点击:

        flex布局的学习思路,flex布局被称为弹性盒子布局,主要是用于案例和图片展示的时候在盒子内平均分配,主要解决的问题是程序在循环的时候maigin和padding的值造成的换行问题。

    以下所有属性都设置在父级元素上

        开启方法 display: flex;
        折行方式 flex-wrap: wrap; 如果想子元素折行就用warp属性,默认是不折行的或者nowrap都可以,不折行的话,子元素的宽度设置将要失效。
        常用属性 justify-content:space-between; 这个是最主要的属性,也是最常用的,内容对齐模式,space-between是平均分布但是每一行的第一个和最后一个没有相对于父级元属的margin值,
                justify-content:space-around; 这个是有margin值的。剩下的 flex-start | flex-end | center | 这几个不太常用我就不解释了
        子元素的排序 order: 4; 这个比较有意思的一个属性但是用到的机会比较的小,主要用在调整子元素的排序,注意必须用在子元素上,比如想让这个元素排到第四,就写成 .box { order:4 }
        其他的属性不太常用,用的时候查一下工具书,写的太多反而会影响到知识点。

    评论内容:

    2014-02-21 为什么要选择蜗牛客设计
    新闻资讯
    2019-09-21 flex布局的学习思路
    产品展示

    www.woniukee.com

    襄阳蜗牛客设计

    地 址:湖北·襄阳汉津路佳侨小区

    邮 编:100085

    总 机: (+86) 13021256845


    About Us

    There's lot of hate out there for a text that amounts to little more than garbled words in an old language. The villagers are out there with a vengeance to get that Frankenstein, wielding torches and pitchforks, wanting to tar and feather it at the least, running it out of town in shame.