【css】display:flex;弹性盒模型全解

前言：弹性盒模型的出现使得前端的布局更简单，更快捷，更灵活。（反正很好用就对了）。

 

一、flex的浏览器内核兼容写法

{ 
    display:-webkit-flex; 
    display:-moz-box;
    display:-mz-flexbox;
    display:flex; 
}

 

二、容器上的六个属性、容器内的子项目上的六个属性

①、容器上的六个属性：

       flex-direction: 决定子项目主轴的方向（默认值为row）

       flex-wrap: 决定子项目是否换行（默认值是不换行nowrap）

       flex-flow: direction wrap的合并写法

       justify-content: 决定子项目(水平)横向布局方式（默认值flex-start）

       align-items: 决定子项目(垂直)纵向布局方式（默认值stretch）

       align-content: 子项目有多列时，决定子项目的纵向布局方式（默认值flex-start）

②、容器内的子项目的六个属性：

       order: 设置子项目的顺序(默认为0)

       flex-grow:  子项目是否可扩大（默认为0，不扩大）

       flex-shrink:   子项目是否可缩小（默认为1，可缩小）（0是false,1是true）

       flex-basis:  设置子项目的初始宽度（默认为auto）

       flex: grow、shrink、basis合并

       align-self: 设置子项目(垂直)纵向方向的位置（默认值stretch）

  

三、容器上的六个属性

①、flex-direction: 决定子项目主轴的方向（默认值为row）

    
1
2


    
1
2


    
1
2


    
1
2

 运行结果：

其实很好记，direction的中文意思是"方向"，而row的中文意思是"行"，column的中文意思是"列"，reverse的中文意思是"颠倒"。这样就很容易理解，也很容易记住了。

 

②、flex-wrap: 决定子项目是否换行（默认值是不换行nowrap）

    
1
2
3
4


    
1
2
3
4


    
1
2
3
4

 运行结果：

同样的wrap的意思是换行，而nowrap的意思是不换行。而wrap-reverse颠倒换行。从运行结果中可看出来，当容器宽度小于容器中子项目的宽度总和的时候，如果设置为nowrap不换行子项目会默认进行宽度缩小。

 

③、flex-flow: direction wrap的合并写法

flex-flow就不多说了，他就是direction，wrap的合并。

比如

flex-flow:row nowrap; 等价于

flex-direction:row;  flex-wrap:nowrap;

 

④、决定子项目(水平)横向布局方式（默认值flex-start）

    
1
2
3
4


    
1
2
3
4


    
1
2
3
4


    
1
2
3
4


    
1
2
3
4

 运行结果：

从字面意思上去理解记住justify的值会更好， flex-start，flex-end，center就不多说了。space-between就是剩余的空间在子项目中平均分布，space-around就是剩余空间会围绕着子项目平均分布。

 

⑤、align-items: 决定子项目(垂直)纵向布局方式（默认值stretch）

    
1
2
3
4
5


    
1
2
3
4


    
1
2
3
4


    
1
2
3
4


    
1
2
3
4

运行结果：

这里的flex-start，flex-end，center也就不多说了。 重点说下stretch，baseline。stretch是默认值（如果项目未设置高度或设为auto，将占满整个容器的高度。baseline是项目的根据第一行文字的基线对齐。看上图中的第一个跟最后一个就明白了。

 

⑥、align-content: 子项目有多列时，决定子项目的纵向布局方式（默认值flex-start），align-content要flex-wrap:wrap; 进行换行配合着使用。

    
1
2
3


    
1
2
3


    
1
2
3


    
1
2
3


    
1
2
3


    
1
2
3

运行结果：

 align-content的前五个值都是跟justify-content是一样效果，但是align-content:stretch;该值是justify-content没有的。他的效果是剩余空间在子项目的bottom下面进行平均分布。

 

三、容器内的子项目的六个属性

①、order: 设置子项目的顺序(默认为0)

    
1
2
3
4
5

  运行结果： 

  

 

②、flex-grow:  子项目是否可扩大（默认为0，不扩大）    

    
1
2
3
4


    
1
2
3
4


    
1
2
3
4

 运行结果：

 求一个子项目占容器的百分比用 该子项目flex-grow的值/容器所有子项目flex-grow值的总和。

 

③、flex-shrink:   子项目是否可缩小（默认为1，可缩小）（0是false,1是true）

    
1
2
3
4


    
1
2
3
4


    
1
2
3
4

运行结果：

如果没设置换行并且flex-shrink设置为0的话，子项目就不可根据容器缩小了，而且超出部分会撑出到容器外。子项目部分设置flex-shrink:0;的话，那些设置了的也不会进行缩小，当容器小于一定程度后，超出部分也会撑出到容器外。

 

④、flex-basis:  设置子项目的初始宽度（默认为auto）

    
1
2
3
4


    
1
2
3
4

 运行结果： 

basis的默认值为auto，即子项目的本来大小。像上面代码中，给子项目设置width:300px;跟给子项目设置basis:300px;的效果是一样的。

 

⑤、flex: grow、shrink、basis合并

flex也不多说，就是grow、shrink、basis的合并。

要说的是，flex有两个特殊值:auto、none

{ flex:auto; }
等价于
{ flex-grow:1; flex-shrink:1; flex-basis:auto; }

{ flex:none; }
等价于
{ flex-grow:0; flex-shrink:0; flex-basis:auto; }

  

⑥、align-self: 设置子项目(垂直)纵向方向的位置（默认值auto）

    
1
	
    
2
    
3
    
4
    
5

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的align-items属性。slign-self默认值为auto，表示继承容器的align-items属性，如果容器没有设置align-items的值，等同于继承了stretch。（align-items的默认值为stretch）