Flex-basis全面解析与实战技巧

一分耕耘，一分收获！既然打开了这篇文章《Flex-basis使用详解与实战技巧》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

flex-basis 定义 flex 项目在主轴方向的初始大小，优先级高于 width，常用取值有像素、百分比、auto 和 0；当与 flex-grow、flex-shrink 结合时，可精确控制空间分配，如实现等宽布局或固定侧边栏+自适应主区，设置为 0 可忽略内容尺寸并按比例分配剩余空间。

flex-basis 决定的是 flex 项目在分配多余空间前的初始大小。它类似于 width 或 height，但专门用于弹性布局中的主轴方向。

flex-basis 的基本作用

在弹性容器中，每个子元素（flex item）会先根据 flex-basis 确定其基准尺寸，然后再根据剩余空间和 flex-grow、flex-shrink 调整最终大小。

它的默认值是 auto，表示使用元素的内容大小或设置的 width/height 值。

• 具体长度：如 200px、10em
• 百分比：相对于父容器主轴尺寸的百分比，如 50%
• auto：根据内容或 width/height 计算
• 0：此时 content 不会影响基础尺寸，空间完全由 grow/shrink 分配

与 width 的区别

当 flex-direction 为 row 时，flex-basis 类似于 width，但它优先级更高且受 flex 布局机制控制。

如果同时设置了 width 和 flex-basis，flex-basis 会覆盖 width（除非 flex-basis 为 auto）。

例如：

配合 flex-grow 和 flex-shrink 使用

flex-basis 是完整 flex 属性的一部分。通常使用简写形式：

• flex: 1 → 相当于 flex: 1 1 0%
• flex: 0 1 auto → 默认值
• flex: 0 0 200px → 不扩展不收缩，固定 200px

当设置为 0 时（如 flex-basis: 0），内容本身不会占用额外空间，所有空间按比例分配，避免因内容长短导致不均。

实际应用场景

适合需要精确控制初始尺寸的弹性布局，比如等分布局、侧边栏+主内容区。

例如创建两个等宽项：

或一个固定宽度侧边栏 + 自适应主区域：

基本上就这些。理解 flex-basis 能帮你更精准地控制弹性布局的空间分配。

今天关于《Flex-basis全面解析与实战技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！