MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

这篇翻译不完整。请帮忙从英语翻译这篇文章

 

CSS属性flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性,可以同时设置flex-grow, flex-shrinkflex-basis

/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex: 2;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;

在大多数情况下,开发者需要将flex设置为auto,initial,none或一个无单位数。尝试调整下面的flex容器以观察这些值的作用:

auto
元素会根据自身的宽度与高度来确定尺寸,但是会自行伸长以吸收flex容器中额外的自由空间,也会缩短至自身最小尺寸以适应容器。这相当于将属性设置为 "flex: 1 1 auto".
initial
属性默认值, 元素会根据自身宽高设置尺寸。它会缩短自身以适应容器,但不会伸长并吸收flex容器中的额外自由空间来适应容器 。相当于将属性设置为"flex: 0 1 auto"。
none
元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应flex容器。相当于将属性设置为"flex: 0 0 auto"。
<positive-number>
元素会被赋予一个容器中自由空间的指定占比。这相当于设置属性为"flex: <positive-number> 1 0"。

默认情况下,元素不会缩短至小于内容框尺寸,若想改变这一状况,请设置元素的min-width 与 min-height属性。

初始值as each of the properties of the shorthand:
适用元素flex items, including in-flow pseudo-elements
是否是继承属性
适用媒体visual
计算值as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
正规顺序order of appearance in the formal grammar of the values

更多属性和定义请参见 使用 CSS 弹性盒子

语法

flex 属性可以指定1个,2个或3个值。

单值语法: 值必须为以下其中之一:

双值语法: 第一个值必须为一个无单位数,并且它会被当作<flex-grow>的值。第二个值必须为以下之一:

三值语法:

  • 第一个值必须为一个无单位数,并且它会被当作<flex-grow>的值。
  • 第二个值必须为一个无单位数,并且它会被当作 <flex-shrink>的值。
  • 第三个值必须为一个有效的宽度值, 并且它会被当作<flex-basis>的值。

取值

<'flex-grow'>
定义 flex 元素的 flex-grow 属性,详见 <number>。默认值为 1,负值无效。
<'flex-shrink'>
定义 flex 元素的 flex-shrink 属性,详见 <number>。默认值为 1,负值无效。
<'flex-basis'>
定义 flex 元素的 flex-basis 属性。任何可用于 width 和 height 的值都可接受。若值为0,则必须加上单位,以免被视作伸缩性。 默认值为0%。
none
该关键字等于 0 0 auto.

当使用一个或两个无单位数时, flex-basis会从auto变为0. 可以参考Flexible Box Layout Module草案来了解更多信息。

正式语法

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

示例

#flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
}

#flex-container > .flex-item {
	-webkit-flex: auto;
	flex: auto;
}

#flex-container > .raw-item {
	width: 5rem;
}

Example

#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {
  flex: auto;
}

#flex-container > .raw-item {
  width: 5rem;
}
<div id="flex-container">
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>

Result

规范

规范 状态 备注
CSS Flexible Box Layout Module
flex
Candidate Recommendation Initial definition

浏览器兼容性

特性 Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
基础支持 18.0 (18.0)[1]
20.0 (20.0)
28.0 (28.0)[2]
21.0-webkit
29.0
(Yes)-webkit
(Yes)
10.0-ms[3]
11.0[3]
12.10

6.1-webkit
9.0

特性 Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
基础支持 ? 4.4 (Yes)-webkit
(Yes)
11 12.10 7.1-webkit

[1] 在 Gecko 18.0 (Firefox 18.0 / Thunderbird 18.0 / SeaMonkey 2.15) and 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16)中, 弹性框可通过修改about:config 中的偏好设置 layout.css.flexbox.enabled 来被支持, 默认值为 false.

[2] 多行弹性框从 Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25) 开始支持。

除了无前缀版本的支持之外, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) 出于web兼容性的原因添加了对 -webkit前缀版本的支持,可通过修改偏好设置中的 layout.css.prefixes.webkit 开启, 默认值为 false。 从 Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) 开始该参数默认值变为 true

[3] 在Internet Explorer 10-11 (不包括 12+) 中,flex 语句的 flex-basis 部分在使用 calc() 时会被忽略。 可以通过使用 longhand 写法而不是 shorthand 写法来解决。更多信息,请参阅 Flexbug #8。 并且在一个 flex 表达式中,使用无单位数的 flex-basis 部分在这些版本中会被识别为无效并会因此被忽略。一种解决方法是在使用 shorthand 写法时,让 flexflex-basis 部分始终带上单位。更多信息,请参阅 Flexbug #4

参见

文档标签和贡献者

 最后编辑者: zhuangyin,