CSS3弹性盒模型

时间:2022-11-11 08:23:15

CSS3弹性盒模型

CSS3 属性集合

box-orient设置或检索弹性盒模型对象的子元素的排列方式。

box-pack设置或检索弹性盒模型对象的子元素的对齐方式。

box-align设置或检索弹性盒模型对象的子元素的对齐方式。

box-flex设置或检索弹性盒模型对象的子元素如何分配其剩余空间。

box-direction设置或检索弹性盒模型对象的子元素的排列顺序是否反转。

如要使得弹性盒模型属性生效,需先定义父元素display的参数值为box或inline-box。

1.box-flex的运用 设置或检索弹性盒模型对象的子元素如何分配其剩余空间

         1.1 子元素没有固定的宽度,a1,a2,a3,按照一定的比例显示,如下图

        .one{

            width:500px;

            margin:0 auto;

            height:200px;

            background:rgba(51,51,51,0.2);

            display:-webkit-box;

            display:-moz-box;

            display:box;

}

.a1{

            -moz-box-flex:1;

            -webkit-box-flex:1;

            box-flex:1;

            background:rgba(255,0,0,1);

}

.a2{

    -moz-box-flex:2;

            -webkit-box-flex:2;

            box-flex:2;

            background:rgba(0,255,0,1);

}

.a3{

            -moz-box-flex:2;

            -webkit-box-flex:2;

            box-flex:2;

            background:rgba(0,0,255,1);

}

CSS3弹性盒模型 

    1.2 部分子元素有固定宽度,且有编剧等,在使用box-flex,首先会把子元素占有的空间去掉,在进行按比例分,例如:b1的宽度为200px,b2的左右边距为20px,two的宽度为500px,b2,b3会按照500px-200px-20*2px 宽度进行划分,

        .two{

            width:500px;

            margin:10px auto;

            height:200px;

            background:rgba(51,51,51,0.2);

            display:-webkit-box;

            display:-moz-box;

            display:box;

            box-sizing:border-box;

            padding:20px;

}

.b1{

            width:200px;

            background:rgba(255,0,0,1);

}

.b2{

            -moz-box-flex:2;

            -webkit-box-flex:2;

            box-flex:2;

            margin:0 20px;

            background:rgba(0,255,0,1);

}

.b3{

            -moz-box-flex:2;

            -webkit-box-flex:2;

            box-flex:2;

            background:rgba(0,0,255,1);

}

CSS3弹性盒模型 

2. box-orient的应用,设置或检索弹性盒模型对象的子元素的排列方式。

         有两种排列方式,水平和垂直

         box-orient:horizontal 水平排列

         box-orient:vertical  垂直排列

        .three{

            width:500px;

            margin:10px auto;

            height:200px;

            background:rgba(51,51,51,0.2);

            display:-webkit-box;

            display:-moz-box;

            display:box;

            box-sizing:border-box;

            padding:20px;

            -webkit-box-orient:horizontal;  /*水平排列*/

            -moz-box-orient:horizontal;

            box-orient:horizontal;

            -webkit-box-orient:vertical;    /*垂直排列*/

            -moz-box-orient:vertical;

            box-orient:vertical;

}

.c1{

            width:200px;

            height:30px;

            background:rgba(255,0,0,1);

}

.c2{

            -moz-box-flex:2;

            -webkit-box-flex:2;

            box-flex:2;

            margin:20px 0;

            background:rgba(0,255,0,1);

}

.c3{

            -moz-box-flex:2;

            -webkit-box-flex:2;

            box-flex:2;

            background:rgba(0,0,255,1);

}

垂直排列

 CSS3弹性盒模型

水平排列

 CSS3弹性盒模型

3. box-direction的运用,设置或检索弹性盒模型对象的子元素的排列顺序是否反转

         box-direction:normal;               //正常顺序

         box-direction:reverse;              //反过来顺序

         .four{

                  width:500px;

                  margin:10px auto;

                  height:200px;

                  background:rgba(51,51,51,0.2);

                  display:-webkit-box;

                  display:-moz-box;

                  display:box;

                  box-sizing:border-box;

                  padding:20px;

                  -webkit-box-direction:normal;         /*正常排列*/

                  -moz-box-direction:normal;

                  box-direction:normal;

                  -webkit-box-direction:reverse;        /*反过来排列*/

                  -moz-box-direction:reverse;

                  box-direction:reverse;

}

.d1{

                  width:200px;

                  background:rgba(255,0,0,1);

}

.d2{

                  -moz-box-flex:2;

                  -webkit-box-flex:2;

                  box-flex:2;

                  background:rgba(0,255,0,1);

}

.d3{

                  -moz-box-flex:2;

                  -webkit-box-flex:2;

                  box-flex:2;

                  background:rgba(0,0,255,1);

}

反过来显示

 CSS3弹性盒模型

正常显示

 CSS3弹性盒模型

4. box-align的运用,设置或检索弹性盒模型对象的子元素的对齐方式。

start: 设置弹性盒模型对象的子元素从开始位置对齐

center: 设置弹性盒模型对象的子元素居中对齐

end: 设置弹性盒模型对象的子元素从结束位置对齐

baseline: 设置弹性盒模型对象的子元素基线对齐

stretch: 设置弹性盒模型对象的子元素自适应父元素尺寸

.five{

         width:500px;

         margin:10px auto;

         height:200px;

         background:rgba(51,51,51,0.2);

         display:-webkit-box;

         display:-moz-box;

         display:box;

         box-sizing:border-box;

         padding:20px;

         -webkit-box-align:start;  /*设置弹性盒模型对象的子元素从开始位置对齐 */

         -moz-box-align:start;

         box-align:start;

         -webkit-box-align:center;         /*设置弹性盒模型对象的子元素居中对齐 */

         -moz-box-align:center;

         box-align:center;

         -webkit-box-align:end;     /*设置弹性盒模型对象的子元素从结束位置对齐 */

         -moz-box-align:end;

         box-align:end;

         -webkit-box-align:baseline;     /*设置弹性盒模型对象的子元素基线对齐*/

         -moz-box-align:baseline;

         box-align:baseline;

         -webkit-box-align:stretch;       /*设置弹性盒模型对象的子元素自适应父元素尺寸 */

         -moz-box-align:stretch;

         box-align:stretch;

}

.e1{

         width:200px;

         height:90px;

         background:rgba(255,0,0,1);

}

.e2{

         height:120px;

         -moz-box-flex:2;

         -webkit-box-flex:2;

         box-flex:2;

         background:rgba(0,255,0,1);

}

.e3{

         height:90px;

         -moz-box-flex:2;

         -webkit-box-flex:2;

         box-flex:2;

         background:rgba(0,0,255,1);

}

Start

 CSS3弹性盒模型

Center

 CSS3弹性盒模型

end

 CSS3弹性盒模型

baseline

 CSS3弹性盒模型

stretch

 CSS3弹性盒模型

5. box-pack设置或检索弹性盒模型对象的子元素的对齐方式。

start:弹性盒模型对象的子元素从开始位置对齐(大部分情况等同于左对齐)

center:设置弹性盒模型对象的子元素居中对齐

end: 设置弹性盒模型对象的子元素从结束位置对齐(大部分情况等同于右对齐)

justify:设置或弹性盒模型对象的子元素两端对齐

.six{

    width:500px;

    margin:10px auto;

    height:200px;

    background:rgba(51,51,51,0.2);

    display:-webkit-box;

    display:-moz-box;

    display:box;

    box-sizing:border-box;

    padding:20px;

    -webkit-box-pack:start; /*设置弹性盒模型对象的子元素从开始位置对齐(大部分情况等同于左对齐) */

    -moz-box-pack:start;

    box-pack:start;

    -webkit-box-pack:center;    /*设置弹性盒模型对象的子元素居中对齐  */

    -moz-box-pack:center;

    box-pack:center;

    -webkit-box-pack:end;   /*设置弹性盒模型对象的子元素从结束位置对齐(大部分情况等同于右对齐) */

    -moz-box-pack:end;

    box-pack:end;

    -webkit-box-pack:justify;   /*设置或弹性盒模型对象的子元素两端对齐*/

    -moz-box-pack:justify;

    box-pack:justify;

}

.f1{

    width:200px;

    background:rgba(255,0,0,1);

}

.f2{

    width:50px;

    background:rgba(0,255,0,1);

}

.f3{

    width:90px;

    background:rgba(0,0,255,1);

}

start

 CSS3弹性盒模型

center

 CSS3弹性盒模型

end

 CSS3弹性盒模型

juatify

 CSS3弹性盒模型