欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css3中 弹性盒模型布局之box-flex_html/css_WEB-ITnose

程序员文章站 2024-04-02 19:18:16
...
box-flex:也就是让子容器针对父容器的宽高属性按照一定的规则来划分

Eg:

html代码:

01

02

03

CSS样式:

body,div { background:#fff; margin:0; padding:0;}

.wrap { width:600px; height:200px; color:#fff; margin:20px 0 0 20px; text-align:center;

display:-moz-box; display:-webkit-box; display:box;

-moz-box-orient:block-axis; -webkit-box-orient:block-axis; box-orient:block-axis;

-moz-box-direction:reverse; -webkit-box-direction:reverse; box-direction:reverse;

}

.box1 {background:red;

-moz-box-flex:3; -webkit-box-flex:3; box-flex:3;

-moz-box-ordinal-group:1; -webkit-box-ordinal-group:1; box-ordinal-group:1;

}

.box2 {background:green;

-moz-box-flex:1; -webkit-box-flex:1; box-flex:1;

-moz-box-ordinal-group:3; -webkit-box-ordinal-group:3; box-ordinal-group:3;

}

.box3 {background:blue;

-moz-box-flex:2; -webkit-box-flex:2; box-flex:2;

-moz-box-ordinal-group:2; -webkit-box-ordinal-group:2; box-ordinal-group:2;

}

预览效果:

解析:

先看父级元素中设置的属性

1、box-orient:block-axis; 使得子元素按照块级类型竖向显示;

2、box-direction:reverse; 使得子元素显示顺序与默认相颠倒;

再看子元素中的属性(这个以红色区域且标有01文字的模块为例来做详细介绍)

1、box-flex:3; 子元素依照无级元素设置了占有比例。从全局来看,一共将低级元素划分成了6份,而红色区域是占了3/6的,即上图中显示所整体高度的1/2;

2、box-ordinal-group:1; 即给每一个子元素定义了一个组,则按照组的大小来呈现,先小后大; 按照组中定义的大小,本应该是红色居上、蓝色居中、绿色最下显示,而在父级元素中定义了一个子元素的反向呈现方式(box-direction:reverse),即与默认相反;

说到这里,我想大家都豁然开朗了吧!呵呵,当然也存在疑问,如果想让其中某一模块设置为固定数字,那么其他模块又会按怎样的比例来呈现呢?我们可以再看一下下面这个例子(由例1稍做改动)。

静态代码不变、样式由之前的改为:

body,div { background:#fff; margin:0; padding:0;}

.wrap { width:600px; height:200px; color:#fff; margin:20px 0 0 20px; text-align:center;

display:-moz-box; display:-webkit-box; display:box;

-moz-box-orient:block-axis; -webkit-box-orient:block-axis; box-orient:block-axis;

-moz-box-direction:reverse; -webkit-box-direction:reverse; box-direction:reverse;

}

.box1 {background:red;

-moz-box-flex:3; -webkit-box-flex:3; box-flex:3;

-moz-box-ordinal-group:1; -webkit-box-ordinal-group:1; box-ordinal-group:1;

}

.box2 {background:green;

height:100px;

-moz-box-ordinal-group:3; -webkit-box-ordinal-group:3; box-ordinal-group:3;

}

.box3 {background:blue;

-moz-box-flex:2; -webkit-box-flex:2; box-flex:2;

-moz-box-ordinal-group:2; -webkit-box-ordinal-group:2; box-ordinal-group:2;

}

预览效果:

这个时候,绿色模块的高度是固定的,设置为100,占据了父元素的一半。从预览图可以看出,不管哪个模块,一旦设置了固定的宽或者是高,则优先级会比较高。而其他模块呢,还是按照之前的那种思路,用相应比例来显示。要注意的是,这时候的总宽或者高就变了,应

版权声明:本文为博主原创文章,未经博主允许不得转载。