flex-basis生效，width被跳过；因flex-basis是主轴“入场值”，width仅在flex-basis: auto时作为内容后的fallback，二者非覆盖而是计算流程先后关系。

flex-basis 不是 width 的增强版，它是 Flex 布局中主轴尺寸的“入场值”；width 在 flex 容器里只是 fallback，且只在 flex-basis: auto 时才可能被读取——不是覆盖关系，而是计算流程中的先后层级。

flex-basis 和 width 同时写，哪个生效？

只要 flex-basis 不是 auto（比如设成 200px、0、50%），浏览器就跳过 width，连解析都不做。这不是“谁赢了”，而是布局引擎根本不会走到读取 width 那一步。

• width: 300px; flex-basis: 150px; → 实际主轴尺寸就是 150px，width 形同注释
• flex: 1; → 等价于 flex: 1 1 0%，width 完全无效
• flex-basis: auto; 是唯一让 width 有机会介入的场景，但它只是第三顺位 fallback（第一是内容固有宽，第二才是 width）

为什么 flex-direction 改变后，flex-basis 突然“管高度”了？

因为 flex-basis 管的是主轴方向，不绑定 width 或 height 这个名字。浏览器只看父容器的 flex-direction：

• flex-direction: row（默认）→ 主轴水平 → flex-basis 控制水平尺寸，覆盖 width
• flex-direction: column → 主轴垂直 → flex-basis 控制垂直尺寸，覆盖 height，此时 width 变成交叉轴约束，不影响空间分配
• 响应式中切到 column 却还留着 flex-basis: 200px，结果项目高度被锁死为 200px，而父容器没设 height，内容就容易溢出或塌缩

想锁死尺寸，该用 width 还是 flex-basis？

单独靠 width 在 flex 容器里不可靠；靠 flex-basis 又容易忽略伸缩行为。真正稳定的做法是用 flex 缩写一次性控制三要素：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• flex: 0 0 200px → 不增长、不收缩、基准尺寸 200px（等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 200px）
• flex: 0 1 200px → 允许压缩但禁止拉伸，适合响应式收窄
• width: 200px; flex: none; 也能生效，但 flex: none 等价于 flex: 0 0 auto，仍依赖内容宽度，不如显式写 flex-basis 精确

百分比 flex-basis 在哪些地方会出问题？

flex-basis: 50% 看似直观，但在旧环境里行为不稳定：

• Android WebView 4.4–5.1 对百分比解析不准，常导致尺寸错乱
• flex-basis: 50% 是相对于父容器主轴尺寸计算的“起点”，不是最大宽度；若加 padding 或 border，很容易撑破容器
• 更稳妥的选择：flex-basis: 200px 或 flex-basis: 25vw，这些值在所有主流环境都解析一致

最容易被忽略的一点：flex-basis 不是“最终宽度”，它只是空间分配的第一步；后续是否被拉伸（flex-grow）、压缩（flex-shrink）、截断（min-width）才决定真实尺寸——只设 flex-basis 而不约束伸缩性，等于只画了起点线，没管终点在哪。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！