css3弹性盒模型

1、简介

css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其余盒子中的分布方式以及如何处理可用的空间。使用该模型，能够很轻松的建立自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

目前box属性尚未获得firefox、chrome浏览器的彻底支持，但可使用它们的私有属性定义firefox(-moz-)、chrome/safari（-webkit-)。因此彻底能够在手机端的webview页面中采起这样的布局。

2、弹性盒模型

默认状况下，盒子并不具备弹性，若是box-flex的属性值至少为1时，则变得富有弹性。若是盒子不具备弹性，它将尽量的宽使其内容可见，且没有任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height）。

弹性盒模型使用细则：

1.必须给父容器定义display: box，其子元素才能够进行划分。

若是给class为p1的子元素设置box-flex设置为3，给class为p2的子元素设置box-flex为1，给class为p3的子元素设置box-flex为1，说明分别给其设置3等分和1等分和1等分。

即给class为p1的子元素设置宽度为100%*3/5=60%；给class为p2的子元素设置宽度为100%*1/5=20%；给class为p3的子元素设置宽度为100%*1/5=20%;

2.若是进行父容器划分的同时，他的子元素有的设置了固定宽度，有的要进行划分的话，那么划分的宽度 = 父容器的宽度 – 已经设置的固定宽度 。再进行对应的划分。

3、box属性

具体的属性有：box-orient | box-direction | box-align | box-pack | box-lines

一、box-orient

经常使用的几个属性值是：horizontal | vertical | inherit

horizontal：子元素水平排列；vertical：子元素竖直排列；inherit：子元素竖直排列而且让子元素继承父元素的相关属性。

二、box-direction

经常使用的两个属性值是：normal | reverse

normal是默认值，按照HTML文档里的结构的前后顺序依次展现；reverse表示反转。

三、box-align

box-align 表示父容器里面子容器的垂直对齐方式，可选参数以下表示：start | end | center | baseline | stretch。

四、box-pack

box-pack 表示父容器里面子容器的水平对齐方式，可选参数以下表示：start | end | center | justify。

4、经常使用demo

一、html

1 <div class="wrap">
2     <div class="box1">hello box1</div>
3     <div class="box2">hello box2</div>
4     <div class="box3">hello box3</div>
5 </div>

View Code

二、demo1--style--水平排列

 1 .wrap{
 2     height:60px;
 3     display:-moz-box;
 4     display:-webkit-box;
 5     -moz-box-orient:horizontal;
 6     -webkit-box-orient:horizontal;
 7 /*    -moz-box-direction:reverse;
 8     -webkit-box-direction:reverse;*/
 9 }
10 .box1{background:orange;}
11 .box2{background:#ccc;}
12 .box3{background:green;}

View Code

三、demo1--style--inherit

 1 .wrap{
 2     height:60px;
 3     display:-moz-box;
 4     display:-webkit-box;
 5     -moz-box-orient:inherit;
 6     -webkit-box-orient:inherit;
 7 }
 8 .box1{background:orange;}
 9 .box2{background:#ccc;}
10 .box3{background:green;}

View Code

四、demo1--style--具体分布顺序

 1 .wrap{
 2     display:-moz-box;
 3     display:-webkit-box;
 4     -moz-box-orient:vertical;
 5     -webkit-box-orient:vertical;
 6 }
 7 .box1{
 8     height:60px;
 9     background:orange;
10     -moz-box-ordinal-group:2;
11     -webkit-box-ordinal-group:2;
12 }
13 .box2{
14     height:60px;
15     background:#ccc;
16     -moz-box-ordinal-group:3;
17     -webkit-box-ordinal-group:3;
18 }
19 .box3{
20     height:60px;
21     background:green;
22     -moz-box-ordinal-group:1;
23     -webkit-box-ordinal-group:1;
24 }

View Code

五、demo1--style--弹性盒子

 1 .wrap{
 2     display:-moz-box;
 3     display:-webkit-box;
 4     -moz-box-orient:horizontal;
 5     -webkit-box-orient:horizontal;
 6 }
 7 .box1{
 8     height:60px;
 9     background:orange;
10     -moz-box-flex:3;
11     -webkit-box-flex:3;
12 }
13 .box2{
14     height:60px;
15     background:#ccc;
16     -moz-box-flex:1;
17     -webkit-box-flex:1;
18 }
19 .box3{
20     height:60px;
21     background:green;
22     -moz-box-flex:1;
23     -webkit-box-flex:1;
24 }

View Code

六、demo1--style--inherit+弹性盒子

 1 .wrap{
 2     height:60px;
 3     display:-moz-box;
 4     display:-webkit-box;
 5     -moz-box-orient:inherit;
 6     -webkit-box-orient:inherit;
 7 }
 8 .box1{
 9     background:orange;
10     -moz-box-flex:3;
11     -webkit-box-flex:3;
12 }
13 .box2{
14     background:#ccc;
15     -moz-box-flex:1;
16     -webkit-box-flex:1;
17 }
18 .box3{
19     background:green;
20     -moz-box-flex:1;
21     -webkit-box-flex:1;
22 }

View Code

七、demo1--style--弹性盒子与固有宽度混用

 1 .wrap{
 2     display:-moz-box;
 3     display:-webkit-box;
 4     -moz-box-orient:horizontal;
 5     -webkit-box-orient:horizontal;
 6 }
 7 .box1{
 8     height:60px;
 9     background:orange;
10     -moz-box-flex:2;
11     -webkit-box-flex:2;
12 }
13 .box2{
14     height:60px;
15     background:#ccc;
16     -moz-box-flex:1;
17     -webkit-box-flex:1;
18 }
19 .box3{
20     height:60px;
21     background:green;
22     width:80px;
23 }

View Code

 

5、总结自适应页面布局

bootstrap栅格布局 - 弹性盒模型 - table布局(display:table-cell;)

 

6、弹性盒子(新)

一、简介：
弹性盒子(旧)：display:box; 弹性盒子(新)：display:flex; 下面介绍的就是新的弹性盒子：
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器经过设置 display 属性的值为 flex 或 inline-flex 将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。弹性子元素一般在弹性盒子内一行显示。默认状况每一个容器只有一行。

二、在弹性盒子中经常使用到的属性：

(1)flex-direction - 指定了弹性容器中子元素的排列方式。它的属性值以下：

row：横向从左到右排列(左对齐)，默认的排列方式；row-reverse：反转横向排列(右对齐)，从后往前排，最后一项排在最前面。
column：纵向排列；column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

(2)justify-content - 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。它的属性值以下：

flex-start：弹性项目向行头紧挨着填充。(默认值)
flex-end：弹性项目向行尾紧挨着填充。
center：弹性项目居中紧挨着填充。
space-between：弹性项目平均分布在该行上。
space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。

(3)align-items - 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。它的属性值以下：

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它状况下，该值将参与基线对齐。
stretch：若是指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽量接近所在行的尺寸，但同时会遵守'min/max-width/height'属性的限制。(默认值)

(4)flex-wrap - 用于指定弹性盒子的子元素换行方式。它的属性值以下：

nowrap：默认，弹性容器为单行。该状况下弹性子项可能会溢出容器。
wrap：弹性容器为多行。该状况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
wrap-reverse：反转 wrap 排列。

(5)align-content - 用于修改 flex-wrap 属性的行为，相似 align-items, 但不是设置子元素对齐，而是设置行对齐。它的属性值以下：

stretch：默认，各行将会伸展以占用剩余的空间。
flex-start：各行向弹性盒容器的起始位置堆叠。
flex-end：各行向弹性盒容器的结束位置堆叠。
center：各行向弹性盒容器的中间位置堆叠。
space-between：各行在弹性盒容器中平均分布。
space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

(6)order - 设置弹性盒子的子元素排列顺序。用整数值来定义排列顺序，数值小的排在前面。能够为负值。

(7)align-self - 在弹性子元素上使用。覆盖容器的 align-items 属性。

auto：其计算值为元素的父元素的'align-items'值，若是其没有父元素，则计算值为'stretch'。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它状况下，该值将参与基线对齐。
stretch：若是指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽量接近所在行的尺寸，但同时会遵守'min/max-width/height'属性的限制。

(8)flex - 设置弹性盒子的子元素如何分配空间。

 

网上参考：

http://www.runoob.com/css3/css3-flexbox.html