新增的盒模型属性

主讲人：刘建超新增的盒模型属性新增盒模型属性弹性盒模型概念CSS3新增盒模型属性1.弹性盒模型的概念弹性盒布局模型（FlexibleBoxLayout）是CSS3规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。2.

CSS3新增盒模型属性属性说明box-orient设置或检索弹性盒模型对象的子元素的排列方式box-direction设置或检索弹性盒模型对象的子元素的排列顺序是否反转box-ordinal-group设置或检索弹性盒模型对象的子元素的显示顺序box-flex设置或检索弹性盒模型对象的子元素如何分配其剩余空间box-flex-group设置或检索弹性盒模型对象的子元素的所属组box-pack，box-align设置或检索弹性盒模型对象的子元素的对齐方式box-lines设置弹性盒模型对象的空间溢出管理2.

1box-orient属性语法：box-orient：horizontal|vertical默认值：horizontal取值：

horizontal：设置弹性盒模型对象的子元素为水平排列vertical：设置弹性盒模型对象的子元素为纵向排列说明：设置或检索弹性盒模型对象的子元素的排列方式2.

2box-direction属性语法：box-direction：normal|reverse默认值：normal取值：normal：设置弹性盒模型对象的子元素按正常顺序排列

reverse：反转弹性盒模型对象的子元素的排列顺序说明：设置或检索弹性盒模型对象的子元素的排列顺序是否反转。2.

3box-ordinal-group属性语法：box-ordinal-group：<integer>默认值：1取值：用整数值来定义弹性盒模型对象的子元素显示顺序。说明：设置或检索弹性盒模型对象的子元素的显示顺序。数值较低的元素显示在数值较高的元素前面相同数值的元素，它们的显示顺序取决于它们的代码顺序。2.

4box-flex属性语法：box-flex：<number>默认值：0取值：<number>：使用浮点数指定对象所分配其父元素剩余空间的比例。说明：设置或检索弹性盒模型对象的子元素如何分配其剩余空间。2.

5box-flex-group属性语法：box-flex-group：<integer>默认值：1取值：用整数值来定义弹性盒模型对象的子元素所在的组。说明：设置或检索弹性盒模型对象的子元素的所属组。2.

6box-pack属性语法：box-pack：start|center|end|justify默认值：start取值：

start：设置弹性盒模型对象的子元素从开始位置对齐（大部分情况等同于左对齐）center：设置弹性盒模型对象的子元素居中对齐end：设置弹性盒模型对象的子元素从结束位置对齐（大部分情况等同于右对齐）justify：设置或弹性盒模型对象的子元素两端对齐说明：设置或检索弹性盒模型对象的子元素的对齐方式。2.

7box-align属性语法：box-align：start|end|center|baseline|stretch默认值：stretch取值：

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

center：设置弹性盒模型对象的子元素居中对齐end：设置弹性盒模型对象的子元素从结束位置对齐baseline：设置弹性盒模型对象的子元素基线对齐stretch