css3的弹性盒子模型实例分析

这篇文章主要介绍了css3的弹性盒子模型实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css3的弹性盒子模型实例分析文章都会有所收获，下面我们一起来看看吧。

10年积累的网站设计制作、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站策划后付款的网站建设流程，更有临县免费网站建设让你可以放心的选择与我们合作。

1.box-flex属性规定框的子元素是否可伸缩其尺寸。

父元素必须要声明display:box;子元素才可以用box-flex。

语法：box-flex:value;

示例：

.test_box {display: -moz-box;display: -webkit-box;display:box;width: 800px;margin: 40px auto;padding: 20px;

background: #f0f3f9;}

.list {padding: 0 1em; font: bold 36px/200px monaco;text-shadow: 1px 1px #eee;}

.list_one { -moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background-color: yellow;}

.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background-color: #99CC00;}

.list_three {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background-color: paleturquoise;}

结果： 图片

可以指定某个子元素的宽度，剩下的部分平分。

示例：

.test_box {display: -moz-box;display: -webkit-box;display: box;width: 800px;margin: 40px auto;padding: 20px;

background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/200px monaco;

text-shadow: 1px 1px #eee;}

.list_one {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background: #00CC99;}

.list_two {-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background: #99FF00;}

.list_w300 { width: 300px; background: #CCCCFF}

结果： 图片

2.box-orient

用来确定子元素的方向，是横着还是竖着。

可选值：horizontal | vertical | inline-axis | box-axis | inherit?inline-axis是默认的 horizonta inline-axis 是一样的让元素横着 vertical

box-axis 是一样的让元素纵列。

示例：

.test_box {width: 300px; margin: 0 auto;display: -moz-box;

display: -webkit-box;display: box;box-orient:horizontal;padding: 20px;background: #f0f3f9;}

.list{padding: 0 1em;font: bold 36px/120px monaco;?text-shadow: 1px 1px #eee;-webkit-box-flex: 1;}

.one{background: #99FF00;}

.two{background: #00CC99}

.three{background:#CCCC00}

结果：如图

3.box-direction

用来确定子元素的排列顺序。可选值：

onrmal | revers | inherit onrmal是默认值按着正常顺序排列，从左到右

从前到后,revers表示反转。

示例：

.test_box {display: -moz-box;display: -webkit-box;display: box;-moz-box-direction:reverse;-webkit-box-direction:reverse;

box-direction:reverse;width: 300px;margin: 20px auto;padding: 10px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/150px monaco;text-shadow: 1px 1px #eee;}

.list_one {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background: yellow;}

.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background: #99CC00;}

.three{background: #CCCCFF}

结果： 如图

4.box-align与box-pack

决定盒子内部剩余空间怎么使用，行为效果为对齐方式。

box-align 为垂直方向上的空间利用，box-pack 为水平方向上的空间利用。

box-align 可选参数： start | end | center | baseline | stretch

stretch为默认父标签的高度有多高，子元素就有多高。start表示底边对齐

end 为底部对齐，center居中对齐，baseline 基线对齐。

示例：

.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;

display: -o-box;display: box;-moz-box-align:end;

-webkit-box-align:end; -o-box-align:end; box-align:end;

width: 300px;height: 200px;padding: 20px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/120px monaco;text-shadow: 1px 1px #eee;}

.one{background: #99FF00;}

.two{background: #00CC99}

.three{background:#CCCC00}

结果：如图

box-pack可选值： start | end | center | justify

start为默认值， justify表示两端对齐。

示例：

.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;

display: -o-box;display: box;-moz-box-pack:justify;

-webkit-box-pack:justify; -o-box-pack:justify; box-pack:justify;

width: 300px;height: 200px;padding: 20px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/120px monaco;

text-shadow: 1px 1px #eee;}

.one{background: #99FF00;}

.two{background: #00CC99}

.three{background:#CCCC00}

结果：如图

5.box-lines

用来决定子元素是否可以换行显示，有两个可以选的值：single | mutiple

single 默认值，不换行。mutiple 换行多行显示。

示例：

.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;

display: -o-box;display: box;-moz-box-lines:multiple;

-webkit-box-lines:multiple;-o-box-lines:multiple;

box-lines:multiple; width: 300px;

height: 200px;padding: 20px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/120px monaco;text-shadow: 1px 1px #eee;}

.one{background: #99FF00;}

.two{background: #00CC99}

.three{background:#CCCC00}

结果：如图

6.box-ordinal-group

改变子元素的顺序，值为数字，数字越小越排在前面。

示例：

.test_box {display: -moz-box;display: -webkit-box;display: box;

width: 300px;margin: 40px auto;padding: 20px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/200px monaco;text-shadow: 1px 1px #eee;}

.list_one {-moz-box-flex: 1;-webkit-box-flex: 1; box-flex: 1;

-moz-box-ordinal-group: 1;-webkit-box-ordinal-group: 1;box-ordinal-group: 1;background: #99CC00;}

.list_two{-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;background: #CC33CC;}

.three{ background: #CCCC00}

关于“css3的弹性盒子模型实例分析”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“css3的弹性盒子模型实例分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。