联系我们

Woniukee Design

地 址:湖北·襄阳汉江创业创新产业园

座 机:0710-2309184

手 机: 13021256845

邮   箱:maccat@foxmail.com

您当前位置:首页 >> 展示 >>  工作

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 }
    其他的属性不太常用,用的时候查一下工具书,写的太多反而会影响到知识点。

上一篇:教任何人一个小时内学会做网站