14弹性盒布局.ppt

《14弹性盒布局.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、课程知识盒布局基本知识弹性盒模型微网站案例Web前端移动开发上-弹性盒模型1弹性盒布局模型（FlexibleBoxLayout）是CSS3规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。Web前端移动开发上-弹性盒模型概念1案例-微网站排版2案例功能：1、页面排版2、注意弹性盒布局的使用3、定位的使用4、弹性盒布局和定位的结合使用web前端移动开发上-微网站排版3弹性盒模型4方法说明box-flex设置或检索弹性盒模型对象的子元素如何分配其剩余空间box-flex-grou

2、p设置或检索弹性盒模型对象的子元素的所属组。box-orient设置或检索弹性盒模型对象的子元素的排列方式。box-pack，box-align设置或检索弹性盒模型对象的子元素的对齐方式box-direction设置或检索弹性盒模型对象的子元素的排列顺序是否反转box-ordinal-group设置或检索弹性盒模型对象的子元素的显示顺序。box-flex属性5语法：box-flex：默认值：0取值：：使用浮点数指定对象所分配其父元素剩余空间的比例。说明：设置或检索弹性盒模型对象的子元素如何分配其剩余空间。

3、box-orient属性6语法：box-orient：horizontal

4、vertical默认值：horizontal取值：horizontal：设置弹性盒模型对象的子元素为水平排列vertical：设置弹性盒模型对象的子元素为纵向排列说明：设置或检索弹性盒模型对象的子元素的排列方式box-pack属性7语法：box-pack：start

5、center

6、end

7、justify默认值：start取值：start：设置弹性盒模型对象的子元素从开始位置对齐（大部分情况等同于左对齐）center：设置弹性盒模型对象的子元素居中对齐end：设置

8、弹性盒模型对象的子元素从结束位置对齐（大部分情况等同于右对齐）justify：设置或弹性盒模型对象的子元素两端对齐说明：设置或检索弹性盒模型对象的子元素的对齐方式。box-align属性8语法：box-align：start

9、end

10、center

11、baseline

12、stretch默认值：stretch取值：start：设置弹性盒模型对象的子元素从开始位置对齐center：设置弹性盒模型对象的子元素居中对齐end：设置弹性盒模型对象的子元素从结束位置对齐baseline：设置弹性盒模型对象的子元素基线对齐stretch：设置弹性盒模型对象

13、的子元素自适应父元素尺寸说明：设置或检索弹性盒模型对象的子元素的对齐方式。box-flex-group属性9语法：box-flex-group：默认值：1取值：用整数值来定义弹性盒模型对象的子元素所在的组。说明：设置或检索弹性盒模型对象的子元素的所属组。box-ordinal-group属性10语法：box-ordinal-group：默认值：1取值：用整数值来定义弹性盒模型对象的子元素显示顺序。说明：设置或检索弹性盒模型对象的子元素的显示顺序。数值较低的元素显示在数值较高的元素前面相同数值的元素，它

14、们的显示顺序取决于它们的代码顺序.box-direction属性5语法：box-direction：normal

15、reverse默认值：normal取值：normal：设置弹性盒模型对象的子元素按正常顺序排列reverse：反转弹性盒模型对象的子元素的排列顺序说明：设置或检索弹性盒模型对象的子元素的排列顺序是否反转。总结11重点:盒模型使用难点：理清思路作业-弹性盒布局微网站12谢谢8