DigitalOcean 为您旅程的每个阶段提供云产品。从 $200 免费信用额度开始！
flex-basis 属性是 弹性盒布局模块 的子属性。它指定弹性项目的初始大小，在根据弹性系数分配任何可用空间之前。当从 flex 简写中省略时，其指定值为长度零。
.element {
flex-basis: 100px;
}设置为 auto 的 flex-basis 值会根据元素的大小属性（它本身可以是关键字 auto，根据元素的内容大小调整元素）调整元素的大小。
语法
flex-basis: <number>请注意，与任何宽度一样，负长度都是无效的。
演示
浏览器支持
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 11 | 12+ | 22+ | 22-28 1 29+ | 7-8 1 9+ | 12.1+ |
| iOS Safari | Chrome Android | Firefox Android | Android 浏览器 | Opera Mobile |
|---|---|---|---|---|
| 7-8.4 1 9+ | 92+ | 90+ | 92+ | 12.1+ |
- 1 具有前缀
-webkit-支持
有关如何混合语法以获得最佳浏览器支持的更多信息，请参阅 “使用 Flexbox” 和 来自 DevOpera 的这篇文章。
文章可能需要更新，说明规范建议使用“flex”简写而不是“flex-basis”长写。
详细介绍 Flex-basis 和示例： https://codepen.io/slater101/full/OaZLWd
Codepen 演示未显示 flex-basis
它使用
flex简写规则，最后一个值用于flex-basis，并且演示中以 em 设置了显式值。有人能帮我解决这个问题吗？
http://codepen.io/anon/pen/LRPwZP
size 属性到底是什么？
您好。感谢这篇文章以及整个网站。请问这篇帖子现在还能用吗？因为它有点旧了。谢谢。
是的，这里的所有内容都是相关的。您也可以参考完整的 Flexbox 指南，全面了解所有可用的 Flex 属性以及示例。
没有明确说明是否允许百分比值？
flex-basis属性真的设置元素的宽度吗？它不依赖于flex-direction属性吗？我的意思是，对于
flex-direction: column;，flex basis指定元素的高度，而对于flex-direction: row;，它指定元素的宽度。“如果在 flex 简写中省略，则其指定值为长度为零。”
如果我理解正确，这指的是
flex-basis的默认值为0。如果我的理解是准确的，那么这段信息是不正确的。flex-basis的默认值为auto嗨，Adrian！你完全正确：
flex-basis的初始值为auto。但是，正如文章所述，当它没有在flex简写属性中指定时，它会导致0的初始值。您引用的文本实际上来自规范的最新编辑草案。这篇文章没有解释
flex-basis属性。只有一个例子，不足够。请用详细的说明和更多例子完整解释这个属性。你可以看看这个： https://css-tricks.org.cn/understanding-flex-grow-flex-shrink-and-flex-basis/