简体中文
CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的尺寸。
Android | iOS | web |
---|---|---|
3.9 | 4.11 | 4.0 |
flex-basis: content | <'width'>;
auto
参照元素的 width
和 height
属性计算初始大小。
content
基于 flex 的元素的内容自动调整大小。
**备注:**由于最初规范中没有包括这个值,在一些早期的浏览器实现的 flex 布局中,content 值无效,可以利用设置 (width 或 height) 为 auto 达到同样的效果。
备注: 简史
最初,"flex-basis:auto" 的含义是 "参照我的width和height属性".
在此之后,"flex-basis:auto" 的含义变成了自动尺寸,而 "main-size" 变成了 "参照我的width和height属性"。实际执行于 bug 1032922.
然后呢,这个更改又在 bug 1093316 中被撤销了,所以 "auto" 变回了原来的含义; 而一个新的关键字 'content' 变成了自动尺寸。 (Firefox bug 1105111 包括了增加这个关键字).
auto
Android | iOS | web | |
---|---|---|---|
auto | 3.9 | 4.11 | 4.0 |
content | x | x | 4.0 |
Chrome | Edge | Firefox | Opera | Safari | IE | |
---|---|---|---|---|---|---|
flex-basis | √( 29 ) | √( 12 ) | √( 22 ) | √( 12.1 ) | √( 9 ) | √( 11 ) |
content | √( 29 ) | √( 12 ) | √( 22 ) | √( 12.1 ) | √( 9 ) | √( 11 ) |