弹性盒模型-box/flex

责编:menVScode 2018-01-06 0:01 阅读(530)

        1、注意在使用弹性盒模型的时候,父元素必须要加上 display:box 或者 display:inline-box。

flexdisplay:flex; /* 新版弹性盒模型 */boxdisplay:-webkit-box; /* 老版弹性盒模型 */

        新/旧版弹性盒模型布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
	    <style>
                body{margin: 0;}
                #box{height: 200px;border: 1px solid #000;
                    display: flex;
                    /*display: -webkit-box*/
                }
                #box div{idth: 50px;height: 50px;background-color: #f00;margin: auto;}
            </style>
    </head>
    <body>
        <div id="box">
            <div></div><div></div><div></div><div></div>
        </div>
    </body>
</html>

        

        2、box-orient:定义盒模型的主轴方向,默认主轴是水平方向。

flexflex-direction:row/column
1. 设置主轴方向为水平方向:flex-direction: row; 
2. 设置主轴方向为垂直方向:flex-direction: column;

box-webkit-box-orient:horizontal(水平显示) / vertical(垂直方向)
1. 设置主轴方向为水平方向:-webkit-box-orient: horizontal;
2. 设置主轴方向为垂直方向:-webkit-box-orient: vertical;

        box-direction:主轴上元素的排列顺序

flexflex-direction:row-reverse/column-reverse
1. 设置主轴方向为水平,元素排列为反序:display: flex; flex-direction: row-reverse;

QQ截图20180105215944

box-webkit-box-direction:normal(正序) / reverse(反序)
1. 设置主轴方向为水平,元素排列为反序:display: -webkit-box; -webkit-box-orient:horizontal; -webkit-box-direction:reverse;

QQ截图20180105222044

#box{
	height: 300px;
	border: 1px solid #000;
	/*新版弹性盒模型*/
	/*display: flex;*/
	/*设置主轴方向为水平,元素排列为反序*/
	/*flex-direction: row-reverse;*/
	/*设置主轴方向为垂直,元素排列为反序*/
	/*flex-direction: column-reverse;*/
	
	/*老版弹性盒模型*/
	display: -webkit-box;
	/*设置主轴方向为水平方向*/
	/*-webkit-box-orient: horizontal;*/
	/*设置主轴方向为垂直方向*/
	/*-webkit-box-orient: vertical;*/
	
	/*元素在主轴上排列为反序*/
	/*-webkit-box-direction: reverse;*/
	/*元素在主轴上排列为正序*/
	/*-webkit-box-direction: normal;*/
}
#box div{width: 50px;height: 50px;background-color: #f00;font-size: 40px;color: #fff;}


        3、box-pack:主轴方向富裕的空间管理

flexjustify-content: flex-start / flex-end / center / space-between / space-around;

        富裕空间

QQ截图20180106000728

        (1) justify-content: flex-start; 元素在主轴开始位置 ,富裕空间在主轴的结束位置。

20180105231903

       (2) justify-content: flex-end; 元素在主轴结束位置,富裕空间在主轴开始位置。

    QQ截图20180105232038

       (3) justify-content: center; 元素在主轴中间,富裕空间在主轴两侧。

QQ截图20180105232209

       (4)  justify-content: space-between; 富裕空间平均分配在每两个元素之间

QQ截图20180105232420

       (5) justify-content: space-around; 富裕空间平均分配在每个元素两侧

QQ截图20180105232703


box-webkit-pack: 
        start  所有子元素在盒子左侧显示,富裕空间在右侧
        end  所有子元素在盒子右侧显示,富裕空间在左侧
        center  所有子元素居中
        justify  富裕空间在子元素之间平均分布

        (1) -webkit-box-pack: start; 元素在主轴的开始位置,富裕空间在主轴的结束位置。

20180105231903

        (2) -webkit-box-pack: end; 元素在主轴结束位置,富裕空间在主轴开始位置。

QQ截图20180105232038

        (3) -webkit-box-pack: center; 元素在主轴中间,富裕空间在主轴两侧。

QQ截图20180105232209

        (4) -webkit-box-pack: justify; 富裕空间平均分配在每两个元素之间

QQ截图20180105232420


        4、box-align:侧轴方向富裕的空间管理

flexalign-items: flex-start / flex-end / center / baseline

        (1) align-items:flex-start; 元素在侧轴开始位置,富裕空间在侧轴结束位置。

QQ截图20180105234416

     (2) align-items:flex-end; 元素在侧轴结束位置,富裕空间在侧轴开始位置。

QQ截图20180105234500

        (3) align-items: center; 元素在侧轴中间位置,富裕空间在侧轴两侧。

QQ截图20180105234624

        (4) align-items: baseline; 根据侧轴方向上文字的基线对齐

QQ截图20180105235507

#box{height: 200px;border: 1px solid #000;
	display: flex;
	align-items:baseline;
}
#box div{width: 50px;height: 50px;background-color: #f00;font-size: 20px;color: #fff;text-align: center;}
#box div:nth-of-type(2){line-height: 50px;}


box-webkit-box-align
         start  所有子元素在居顶
         end  所有子元素在居顶
         center  所有子元素居中

        (1) -webkit-box-align:start;  元素在侧轴开始位置,富裕空间在侧轴结束位置,效果同  align-items:flex-start。

        (2) -webkit-box-align:end;  元素在侧轴结束位置,富裕空间在侧轴开始位置,效果同  align-items:flex-end。

        (3) -webkit-box-align:center;  元素在侧轴中间位置,富裕空间在侧轴两侧,效果同  align-items:center。


        5、box-flex:定义盒子的弹性空间 - 给子元素设置

flex:flex-grow
box:-webkit-box-flex

        子元素的尺寸 = 盒子的尺寸 * 子元素的box-flex属性值 / 所有子元素的box-flex属性值的和。


        6、box-ordinal-group:设置元素的具体位置 - 给子元素设置

flex:order   数值越小越靠前,可以接受0 或者负值
#box div:nth-of-type(1){order:5;}
#box div:nth-of-type(2){order:1;}
#box div:nth-of-type(3){order:-3;}
#box div:nth-of-type(4){order:4;}

QQ截图20180106164211

box:-webkit-box-ordinal-group   数值越小越靠前, 最小值默认处理为1
标签: box css3 flex
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码