CSS flex 属性

CSS flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用

默认值 0 1 auto
继承
可动画化 是,参见个别的属性。请参阅 可动画化 ( animatable )
版本 CSS3
JavaScript 语法 object.style.flex="1" 运行范例

CSS 语法

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

属性值

描述
flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量
flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量
flex-basis 项目的长度。合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字
auto 与 1 1 auto 相同
none 与 0 0 auto 相同
initial 设置该属性为它的默认值,即为 0 1 auto。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

浏览器支持

下表中的数字表示支持该属性的第一个浏览器的版本号

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本

29.0
21.0 -webkit-
11.0
10.0 -ms-
28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0

范例

让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容

#main div{flex:1;}

运行范例 »

相关文章

  1. CSS 参考手册: flex-basis 属性
  2. CSS 参考手册: flex-direction 属性
  3. CSS 参考手册: flex-flow 属性
  4. CSS 参考手册: flex-grow 属性
  5. CSS 参考手册: flex-shrink 属性
  6. CSS 参考手册: flex-wrap 属性

CSS 参考手册

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.