弹性盒子（Flex）相关属性全解析

目录

基本介绍

 添加在父元素上的属性(添加在flex容器上的)

（一）设置为弹性布局（display：flex；）

 （二）修改主轴的属性（flex-direction）

 （三）设置子元素是否折换（flex-wrap）

（四）设置主轴的对齐方式（justify-content）

（五） 侧轴对齐（align-itmes，align-content）

 添加在子元素上的属性(添加在flex项目上的)

（一）设置子元素前后顺序（order）

（二）设置子元素的放大比例（flex-grow）

（三）设置子元素的缩小比例（flex-shrink）

---

基本介绍

Flex容器：采用 Flex 布局的元素的父元素；

Flex项目：采用 Flex 布局的元素的父元素的子元素；

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

 添加在父元素上的属性(添加在flex容器上的)

（一）设置为弹性布局（display：flex；）

display:flex;    display:inline-flex;

特点： 

1. 所有的子元素都横着排列的。
2. 如果子元素的高度没有设置,则高度是默认拉伸的。
3. 如果所有子元素的宽度之和大于父元素,默认情况下,子元素不会超出,宽度会被压缩。
4. 如果子元素的高度大于父元素,则高度会超出。

代码展示：

运行结果：

 （二）修改主轴的属性（flex-direction）

flex-direction:row;	默认值
flex-direction:row-reverse	横着反方向
flex-direction:column	主轴为竖着
flex-direction:column-reverse	竖着反方向

代码展示：

    
    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    

运行结果：

 （三）设置子元素是否折换（flex-wrap）

flex-wrap:nowrap;	默认值
flex-wrap:wrap;	换  常用值
flex-wrap:wrap-reverse;	换且反向

代码展示：

    
    
    
    
    



    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    

运行结果：

（四）设置主轴的对齐方式（justify-content）

justify-content:flex-start;	主轴开始对齐
justify-content:flex-end;	主轴结束对齐
justify-content:center;	居中
justify-content:space-between;	2端对齐
justify-content:space-around;	2边间距和中间间距的比值是1:2
justify-content:space-evenly;	2边间距和中间间距的比值是1:1

代码展示：

    
    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    

运行结果：

（五） 侧轴对齐（align-itmes，align-content）

注意：align-content属性必须搭配flex-wrap使用！！！

align-itmes

align-itmes:stretch ;	默认值
align-itmes:flex-start;	开始对齐
align-itmes:flex-end;	结束对齐
align-itmes:center;	居中

align-content

align-content:stretch ;	默认值
align-content:flex-start;	开始对齐
align-content:flex-end;	结束对齐
align-content:center;	居中
align-content:space-between;	2端对齐
align-content:space-around;	2边间距和中间间距的比值是1:2
align-content:space-evenly;	2边间距和中间间距的比值是1:1

代码展示：

    
    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    

运行结果：

 添加在子元素上的属性(添加在flex项目上的)

（一）设置子元素前后顺序（order）

order：默认值是0，数值越小越靠前，可以给负数。

代码展示：

    
    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
    

运行结果：

（二）设置子元素的放大比例（flex-grow）

默认值为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

代码展示：

    
    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
    

运行结果：

（三）设置子元素的缩小比例（flex-shrink）

默认值为1。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。（适合移动端溢出出滚动条的效果，前提是利用弹性布局写）

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

代码展示：

    
    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
    

运行结果：

码字不易，点个赞再走吧~~~