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

 

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

大多数情况下,开发者需要将flex设置为autoinitialnone,或一个无单位正数。尝试调整下面的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 弹性盒子

语法

/* 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 属性可以指定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: 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

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 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

参见

文档标签和贡献者

最后编辑者: weiqinl,