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）。
例如：
适合初学的标准三层架构，采用ajax，页面布局div+css符合w3c，用vs自带的sqlserver，免配置sqlserver，使用方便，里面共有5个项目，点击最外层的.sln直接可运行。网站采用asp.net 用户角色配置（membership，UserRoles），用户角色、权限可在asp.net配置里修改，注册，登陆均采用asp.net登陆控件，网站根据用户角色自定义sitemap，基本上
配合 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: 50%;或一个固定宽度侧边栏 + 自适应主区域：
侧边栏：flex: 0 0 240px；主区域：flex: 1 1 0%基本上就这些。理解 flex-basis 能帮你更精准地控制弹性布局的空间分配。
