这篇翻译不完整。请帮忙从英语翻译这篇文章。
CSS属性flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，可以同时设置flex-grow, flex-shrink与flex-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容器以观察这些值的作用:
<div class="flex-container"> <div class="item auto">auto</div> <div class="item auto">auto</div> <div class="item auto">auto</div> </div> <div class="flex-container"> <div class="item auto">auto</div> <div class="item initial">initial</div> <div class="item initial">initial</div> </div> <div class="flex-container"> <div class="item auto">auto</div> <div class="item auto">auto</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item initial">initial</div> <div class="item none">none</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item four">4</div> <div class="item two">2</div> <div class="item one">1</div> </div>
* {
box-sizing: border-box;
}
.flex-container {
background-color: #F4F7F8;
resize: horizontal;
overflow: hidden;
display: flex;
margin: 1em;
}
.item {
margin: 1em;
padding: 0.5em;
width: 110px;
min-width: 0;
background-color: #1B5385;
color: white;
font-family: monospace;
font-size: 13px;
}
.initial {
flex: initial;
}
.auto {
flex: auto;
}
.none {
flex: none;
}
.four {
flex: 4;
}
.two {
flex: 2;
}
.one {
flex: 1;
}
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 type | as each of the properties of the shorthand:
|
| 正规顺序 | order of appearance in the formal grammar of the values |
更多属性和定义请参见 使用 CSS 弹性盒子
语法
flex 属性可以指定1个，2个或3个值。
单值语法: 值必须为以下其中之一:
- 一个无单位数(
<number>): 它会被当作<flex-grow>的值。 - 一个有效的宽度(
width)值: 它会被当作<flex-basis>的值。 - 关键字
none, auto,或initial.
双值语法: 第一个值必须为一个无单位数，并且它会被当作<flex-grow>的值。第二个值必须为以下之一：
- 一个无单位数：它会被当作
<flex-shrink>的值。 - 一个有效的宽度值: 它会被当作
<flex-basis>的值。
三值语法:
- 第一个值必须为一个无单位数，并且它会被当作
<flex-grow>的值。 - 第二个值必须为一个无单位数，并且它会被当作
<flex-shrink>的值。 - 第三个值必须为一个有效的宽度值， 并且它会被当作
<flex-basis>的值。
取值
<'flex-grow'>- 定义 flex 元素的 flex-grow 属性，详见
<number>。默认值为 0，负值无效。 <'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>
var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
raw.style.display = raw.style.display == "none" ? "block" : "none";
});
#flex-container {
width: 100%;
font-family: Consolas, Arial, sans-serif;
}
#flex-container > div {
border: 1px solid #f00;
padding: 1rem;
}
#flex-container > .raw-item {
border: 1px solid #000;
}
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 |
| 特性 | 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 写法时，让 flex 的 flex-basis 部分始终带上单位。更多信息，请参阅 Flexbug #4。