Flex布局总结

目录

一、基本使用

 二、主要的父容器属性

 （1）flex-direction设置子元素排列

 （2）justify-content设置子元素对齐方式

 （3）flex-wrap设置换行

 （4）align-items单行时设置子元素位置

 （5) align-content多行时设置子元素位置

 （6）flex-flow复合属性

三、子项常用属性

（1）flex设置子项的空间大小

（2）align-self单独设置每个子项的位置

（3）order设置item顺序

---

一、基本使用

父容器与子容器

使用flex布局就是要将父容器设置为flex布局，之后便可控制子元素的布局。

    
    
    
    
    


    

        1
        2
        3
    

效果：

 二、主要的父容器属性

属性	描述
flex-direction	设置主轴的方向
justify-content	设置主轴上元素的排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上子元素的排列方式（多行）
align-items	设置侧轴上子元素的排列方式 （单行）
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap属性

主轴默认沿x轴正方向，侧轴默认沿y轴负方向。

 （1）flex-direction设置子元素排列

元素按主轴进行排列,默认为row

 子元素，按列进行排列，如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            flex-direction: column;
        }

 （2）justify-content设置子元素对齐方式

设置子元素在主轴上的排列方式，默认为flex-start

 案例，设置右对齐，如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: flex-end;
        }

设置居中对齐，如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: center;
        }

 平方剩余空间，如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-around;
        }

 先两边贴边，再平方空间对齐，如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-between;
        }

 （3）flex-wrap设置换行

设置子元素是否换行，默认不换行，当子元素过多时即使设置了宽度子元素也会按比例收放排列。

设置五个已超过宽度的小的子元素，效果如下：

        1
        2
        3
        4
        5
    

 设置换行，效果如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-between;
            f

 （4）align-items单行时设置子元素位置

侧重的子元素位置(单行)

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-between;
            align-items: center;
        }

效果:

 （5) align-content多行时设置子元素位置

设置侧轴上子元素的排列方式（多行），一般配合换行属性使用该属性

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
        }

效果：

 （6）flex-flow复合属性

相当于同时可以设置flex-direction和flex-wrap。

使用案例，如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-between;
            align-content: space-between;
            /*flex-direction: column;*/
            /*flex-wrap: wrap;*/
            /*相当于上面两行的效果*/
            flex-flow: column wrap;
        }

效果：

三、子项常用属性

属性	描述
flex	子项目占的份数
align-self	控制子项自己在侧轴的排列方式
order	定义了子项的排列顺序

（1）flex设置子项的空间大小

用来设置子项分配多少份空间，按照剩余的空间来分配。

使用案例如下：

效果：

（2）align-self单独设置每个子项的位置

 效果：

（3）order设置item顺序

使用案例：

 效果：

总结完毕，flex布局能用到的就这些！