返回

CSS中的弹性盒子模型

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲，弹性盒改进了块模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。

1. 新版Flex Box

定义弹性盒模型

通过对父级元素设置display属性为flex | inline-flex属性定义该父级容器为弹性盒。
为了兼容性，注意要带上浏览器的厂商表示前缀。

1
2
3
4
.flexbox{
    display: flex;
    display: -webkit-flex;
}

flex各属性介绍

flex: flex-grow | flex-shrink | flex-basis;
flex 是一个简写属性，它包括以下三个值：

flex-grow: 默认值为0，定义了弹性盒中的子元素的拉伸因子，通过这个属性去等比划分弹性盒的宽度，注意这里划分的弹性盒父容器的宽度是除了文字等内容之外的剩余宽度。
flex-shrink: 默认为1，定义了弹性盒中的子元素的收缩因子，通过这个属性去等比收缩相应的宽度。
flex-basis: 默认为auto，定义了弹性盒中的子元素拉伸或者收缩的基准值，注意这个属性和flex-grow配合使用。

flex-flow: flex-direction | flex-wrap;
flex-flow是一个简写属性，它包括以下两个值：

flex-direction: 默认值为row，可取值有 row-reverse | column | column-reverse，定义了弹性盒中的子元素的排列方向。
flex-wrap: 默认值为nowrap，可取值有 wrap | wrap-reverse，定义了弹性盒中的子元素超出父容器时是否换行。

align-content: 默认值为stretch，可取值有 flex-start | flex-end | center | space-between | space-around，定义了弹性盒中子元素的竖直方向排列方式，它适用于多行的弹性盒模型。

align-items: 默认值为stretch，可取值为 flex-start | flex-end | center | baseline，定义了弹性盒中的子元素的竖直方向的排列方式，它适用于单行的弹性盒模型。

align-self: 默认值为stretch，可取值为 flex-start | flex-end | center | baseline，定义了弹性盒子元素在弹性盒父容器中的竖直排列方式，它适用于弹性盒的子元素。

justify-content: 默认值为flex-start，可取值为 flex-start | flex-end | center | space-between | space-around，定义了弹性盒中的子元素在水平方向的排列方式。

order: 用整数值来定义排列顺序，数值小的排在前面。可以为负值。

2. 旧版Flex Box

3. 参考文献

『http://css.doyoe.com/』

『https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Flexible_boxes』