这篇文章需要文法复核。如何帮忙。
这篇翻译不完整。请帮忙从英语翻译这篇文章。
概述
CSS 属性flex-basis 指定了flex item在主轴方向上的初始大小。如果不使用box-sizing来改变盒模型的话，那么这个属性就决定了flex item的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。
The CSS flex-basis property specifies the flex basis which is the initial main size of a flex item. The property determines the size of the content-box unless specified otherwise using box-sizing.
| 初始值 | auto |
|---|---|
| 适用元素 | flex items, including in-flow pseudo-elements |
| 是否是继承属性 | 否 |
| Percentages | refer to the flex container's inner main size |
| 适用媒体 | visual |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| 是否适用于 CSS 动画 | yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. |
| 正规顺序 | the length or percentage before the keyword, if both are present |
语法
Formal syntax: content | <'width'>
flex-basis: 10em /* <'width'> */ flex-basis: 3px /* <'width'> */ flex-basis: auto /* <'width'> */ flex-basis: content flex-basis: inherit
取值
<'width'>width值可以是一个数字后面跟着绝对单位例如px,mm,pt;该值也可以是一个百分数，那么这个百分数就是相对于其父弹性盒容器的宽或者高（取决于主轴方向）。负值是不被允许的。- Defined as a number followed by a absolute unit such as
px,mmorpt, or a percentage of the parent flex container main size property. Negative values are invalid.
例子
element {
flex-basis: 18em;
}
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Flexible Box Layout Module flex-basis |
Candidate Recommendation | Initial definition. |
浏览器规范
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 18.0 (18.0) (behind a pref) [1] 22.0 (22.0) |
21.0-webkit | 11 [2] | 12.10 | 7.0-webkit [3] |
auto |
18.0 (18.0) |
21.0 | 11 | 12.10 | 7.0-webkit |
content |
未实现 | 未实现 | 未实现 | 未实现 | 未实现 |
| Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | 未实现 | 12.10 | 未实现 |
[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true. Firefox supports multi-line flexbox since Firefox 28.
[2] When a non-auto flex-basis is specified, Internet Explorer 10-11 (but not 12+) always uses a content-box box model to calculate the size of a flex item, even if box-sizing: border-box is applied to the element. See Flexbug #7 for more info.
[3] Safari 7.0