CSS 属性 flex-basis
指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing
改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的尺寸。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
这个交互式的例子的源代码存储在一个GitHub库。如果你想为这个项目贡献代码, 请克隆这个仓库 https://github.com/mdn/interactive-examples 然后给我们提交一个 pull request
Note: 当一个元素同时被设置了 flex-basis
(除值为 auto
外) 和 width
(或者在 flex-direction: column
情况下设置了height
) , flex-basis
具有更高的优先级.
语法
/* 指定<'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;
/* 固有的尺寸关键词 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* 在flex item内容上的自动尺寸 */
flex-basis: content;
/* 全局数值 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
取值
<'width'>
-
width 值可以是
<length>
; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数
。负值是不被允许的。默认为auto
。 content
- 基于 flex 的元素的内容自动调整大小。
-
Note:简史
- 最初, "flex-basis:auto" 的含义是 "参照我的
width
和height
属性". - 在此之后, "flex-basis:auto" 的含义变成了自动尺寸, 而 "main-size" 变成了 "参照我的
width
和height
属性"。实际执行于 bug 1032922. - 然后呢, 这个更改又在 bug 1093316 中被撤销了, 所以 "auto" 变回了原来的含义; 而一个新的关键字 'content' 变成了自动尺寸。 (bug 1105111 包括了增加这个关键字).
- 最初, "flex-basis:auto" 的含义是 "参照我的
规范
例子
HTML
<ul class="container">
<li class="flex flex1">1: flex-basis test</li>
<li class="flex flex2">2: flex-basis test</li>
<li class="flex flex3">3: flex-basis test</li>
<li class="flex flex4">4: flex-basis test</li>
<li class="flex flex5">5: flex-basis test</li>
</ul>
<ul class="container">
<li class="flex flex6">6: flex-basis test</li>
</ul>
CSS
.container {
font-family: arial, sans-serif;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.flex {
background: #6AB6D8;
padding: 10px;
margin-bottom: 50px;
border: 3px solid #2E86BB;
color: white;
font-size: 20px;
text-align: center;
position: relative;
}
.flex:after {
position: absolute;
z-index: 1;
left: 0;
top: 100%;
margin-top: 10px;
width: 100%;
color: #333;
font-size: 18px;
}
.flex1 {
flex-basis: auto;
}
.flex1:after {
content: 'auto';
}
.flex2 {
flex-basis: max-content;
}
.flex2:after {
content: 'max-content';
}
.flex3 {
flex-basis: min-content;
}
.flex3:after {
content: 'min-content';
}
.flex4 {
flex-basis: fit-content;
}
.flex4:after {
content: 'fit-content';
}
.flex5 {
flex-basis: content;
}
.flex5:after {
content: 'content';
}
.flex6 {
flex-basis: fill;
}
.flex6:after {
content: 'fill/-webkit-fill-available/-moz-available';
}
结果
规格
规格 | 状态 | 评论 |
---|---|---|
CSS Flexible Box Layout Module flex-basis |
Candidate Recommendation | 初始化定义 |
初始值 | auto |
---|---|
适用元素 | flex items, including in-flow pseudo-elements |
是否是继承属性 | 否 |
Percentages | refer to the flex container's inner main size |
计算值 | as specified, but with relative lengths converted into absolute lengths |
Animation type | a length, percentage or calc(); |
浏览器兼容性
BCD tables only load in the browser
兼容性的表格数据生成在这个页面上。如果你构建这个数据,请检出这个仓库 https://github.com/mdn/browser-compat-data 然后给我们提交一个 pull request
参见
- CSS 弹性盒子指南: Basic Concepts of Flexbox
- CSS 弹性盒子指南: Controlling Ratios of flex items along the main axis
width