CSS3 `flex` 属性

说明

flex CSS 属性指定灵活长度的组件。它是一次设置 flex-grow, flex-shrink 和 flex-basis 属性的简写属性。

下表总结了此属性的使用上下文和版本历史记录。

默认值：	`0 1 auto`; 查看个别属性
适用于：	弹性项目
继承：	No
动画：	Yes, as each of the properties of the shorthand is animatable. 参见动画属性。
版本：	New in CSS3

属性的语法如下：

flex:

[ flex-grow flex-shrink flex-basis ] | none | auto | initial | inherit

下面的示例显示了 flex 属性的作用。

.flex-container {
    -webkit-flex: 1; /* Safari 6.1+ */
        -ms-flex: 1; /* IE 10 */
            flex: 1; /* 标准语法 */
}

下表描述了该属性的值。

值	说明
`flex-grow`	指定弹性项目的弹性增长因子或正弹性。
`flex-shrink`	指定弹性项目的弹性收缩系数或负弹性。
`flex-basis`	指定弹性项目的初始大小。
`none`	相当于将 flex 设置为 `0 0 auto`。
`auto`	相当于将 flex 设置为 `1 1 auto`。
`initial`	将此属性设置为其默认值。
`inherit`	如果指定，则关联元素采用其父元素 `flex` 属性的计算值。

所有主要的现代浏览器都支持 flex 属性。

请参阅以下教程： CSS3 多列布局.