flex-basis用于设置子元素在主轴上的初始占位尺寸，优先级高于width；支持固定值、百分比、auto（默认回退width或内容宽）、0（交由flex-grow分配）；推荐用flex简写统一控制。

直接用 flex-basis 设置子元素在主轴上的初始占位尺寸，它不是 width 的替代，而是空间分配的起点。

flex-basis 的取值和含义

它支持多种单位和关键字：

• 固定值：如 flex-basis: 200px，不管内容多少，先按 200px 占位
• 百分比：如 flex-basis: 30%，按容器当前主轴长度动态计算，适合响应式布局
• auto（默认）：退回到元素的 width 值；若 width 也没设，就由内容撑开
• 0：初始占位为 0，把全部空间分配权交给 flex-grow，常用于“填空型”布局（比如导航栏中间项）

flex-basis 和 width 的关系

两者同时存在时，flex-basis 优先级更高 —— 写了 width: 100px 又写 flex-basis: 200px，最终按 200px 计算。调试时发现尺寸不对，先检查是否被 flex-basis 静默覆盖。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

配合 flex 属性简写更安全

推荐用 flex 简写统一设置三者，避免遗漏：

立即学习“前端免费学习笔记（深入）”；

• flex: 1; 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0;
• flex: 0 0 auto; 表示不伸缩、保持原始尺寸（常用在图标或固定宽高组件）
• flex: 0 0 200px; 明确锁定初始宽度且禁止伸缩

实际应用注意点

在小屏设备上，flex-basis 设得过大容易导致溢出。如果希望子项随屏幕缩小而自适应，优先用 flex-basis: 0 + flex-grow: 1，或改用百分比值，避免固定像素卡死布局。