CSS flex属性

定义和用法

flex属性是下列属性的缩写属性：

flex属性设置flex项目的长度。

注意：如果元素不是flex项，则flex属性无效。

表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

属性	Internet Explorer	Chrome	FireFox	Safari	Opera
属性名称
flex	11.0 10.0 -ms-	29.0 21.0 -webkit-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

无论其内容如何，让所有flex项目的长度相同：

#main div {
  -webkit-flex: 1; /* Safari 6.1+ */
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

尝试一下

属性值	描述
flex-grow	一个数字，指定项目相对于其他flex项目的增长量
flex-shrink	一个数字，指定项目相对于其他flex项目的收缩程度
flex-basis	物品的长度。合法值：“auto”，“inherit”或后跟“％”，“px”，“em”或任何其他长度单位的数字
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	将此属性设置为其默认值。查看initial关键字
inherit	从其父元素继承此属性。查看inherit关键字