流式布局需同时控制伸缩边界和盒模型行为：父容器须有明确宽度，所有元素设box-sizing:border-box，优先用flex而非百分比，配合viewport meta和断点响应式调节。

直接用 width: 100% 或百分比值 + box-sizing: border-box 就能跑起来，但真要稳，得同时控制伸缩边界和盒模型行为。

为什么单纯设 width: 100% 常常失效

因为父容器本身没宽度基准，或者子元素用了默认的 box-sizing: content-box，导致 padding 和 border 额外撑开尺寸。常见现象是：三列写成 width: 33.33%，结果换行了；或者文字溢出、图片错位。

• 确保父容器有明确宽度（比如 max-width: 1200px + margin: 0 auto），否则百分比无从计算
• 所有参与流式计算的元素必须加 box-sizing: border-box，否则 padding: 10px 会让实际宽度变成 33.33% + 20px
• 避免混用 float 和百分比——float 已过时，且在 flex 容器里会失效

flex 是当前最可靠的流式实现方式

比起纯百分比，flex 天然处理换行、对齐、剩余空间分配，而且不用手动算比例。移动端和现代 PC 浏览器支持毫无压力（Chrome 29+、Firefox 28+、Safari 6.1+）。

Article To Html

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

下载

• 容器设 display: flex + flex-wrap: wrap，子项用 flex: 1 1 300px（表示“可伸缩、可收缩、基准宽 300px”）
• 不推荐写死 flex-basis: 33.33%，它在小屏下容易导致子项被压缩到无法阅读
• 如果需要等高列，align-items: stretch 是默认行为，无需额外设置

必须配 viewport meta 才能在移动端生效

没有这行，iOS Safari 和安卓 Chrome 会把页面按 980px 宽度渲染，你的百分比就全乱了。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 别漏掉 initial-scale=1.0，否则双击缩放可能触发意外重排
• 不要加 user-scalable=no——影响可访问性，也违反 WCAG
• 如果项目需兼容老 Android（4.3 及以下），可加 maximum-scale=1.0 防止 pinch-zoom 错乱

流式布局真正的难点不在写法，而在「断点选择」和「内容弹性」：同一套百分比，在 320px 宽屏上可能挤成一团，在 1440px 上又太空。这时候与其硬调 width，不如用 min-width/max-width 给容器划界，再靠 flex 或 grid 做内部调节——这才是现代流式的实际工作流。

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