CSS盒子模型(下)
一．CSS3可伸缩框（Flexible Box）可伸缩框属性（Flexible Box）是css3新添加的盒子模型属性，有人称之为弹性盒模型，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分等分布方式以及如何处理可用的空间。使该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome（-webkit）。
CSS3可伸缩框属性列表：
属性
描述
说明
box-orient
规定框的子元素是否应水平或垂直排列。
水平或垂直分布
box-direction
规定框的子元素的显示方向。
反向分布
box-ordinal-group
规定框的子元素的显示次序。
具体分布
box-flex
规定框的子元素是否可伸缩。
盒子尺寸
box-flex-group
将可伸缩元素分配到柔性分组。
盒子尺寸
box-pack
规定水平框中的水平位置或者垂直框中的垂直位置。
处理空间多
box-align
规定如何对齐框的子元素。
处理空间多
box-lines
规定当超出父元素框的空间时，是否换行显示。
处理空间不足
下面对 CSS3 中新增的弹性盒模型属性做详细介绍。
首先我们先创建一个 html 页面，示例代码1：demo.html
Flexible Box
1
查看更多关于CSS盒子模型之CSS3可伸缩框属性（FlexibleBox）_html/css_WEB-ITnos的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did106880