flex布局失效主因是父容器未设尺寸、对齐属性作用轴混淆、子项flex简写冲突及gap与margin误用；需明确主/交叉轴、设容器宽高、用flex: 0 0值替代width、优先gap而非margin。
只在父容器加 display: flex，子元素不会自动居中、等宽或填满——这是 HTML 模板里 Flex 布局失效最常被忽略的起点。
为什么写了 display: flex 却没对齐？
因为 justify-content 和 align-items 默认值不是 center，而是 flex-start；而且它们作用的轴不同，不能互相替代。
- 横向主轴（
flex-direction: row）时：justify-content: center控制水平居中，align-items: center控制垂直居中 - 纵向主轴（
flex-direction: column）时：两者作用翻转，justify-content: center变成垂直居中 - 如果子元素有固定高度（比如
height: 100px），但父容器没设高度，align-items: center就没效果——交叉轴必须有可参考的尺寸 - 想让单个子项单独居中？用
align-self: center，它会覆盖父级的align-items
模板里三栏结构怎么写才稳？
左右固定 + 中间自适应是模板高频场景，但直接写 width: 200px 和 flex: 1 容易踩坑。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 左/右栏推荐用
flex: 0 0 200px（即不放大、不缩小、基准宽 200px），比单纯width: 200px更安全——避免被flex-shrink压缩 - 中间栏必须用
flex: 1（等价于flex: 1 1 0），不是flex: auto；后者会让内容宽度参与计算，文字一多就撑开整行 - 间距别用
margin，改用父容器的gap: 12px；margin会干扰 Flex 的空间分配逻辑，尤其在响应式断点切换时 - 如果模板要兼容旧 Android WebView，避免同时用
flex-wrap: wrap和子项width: 50%，换成flex: 0 0 50%
Flex 布局在 HTML 模板里容易被忽略的隐式行为
很多“明明写了却没生效”的问题，其实来自 flex 简写的默认值和内容宽度的互动。
-
flex: 1实际是flex: 1 1 0%：忽略子项原始内容宽度，从 0 开始均分剩余空间 -
flex: auto实际是flex: 1 1 auto：先按文字、图片等固有尺寸占位，再分剩余空间——卡片类布局用它极易溢出 - 子项若带
width，会和flex-basis冲突；建议统一用flex-basis或清掉width -
order属性只影响视觉顺序，不影响 DOM 顺序或语义；SEO 和屏幕阅读器仍按 HTML 源码读取
真正卡住模板开发的，往往不是 flex 属性记不全，而是没意识到 flex-basis 怎么跟内容宽度打架、gap 和 margin 在空间计算上根本不是一回事、以及某些 Android WebView 对 flex-wrap + 百分比的重排 bug ——这些细节不处理，模板一换设备就错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
