columns仅对连续块级流生效，非智能分块；需满足块级格式化上下文与足够宽度两个硬条件，column-width比column-count更适配响应式，break-inside: avoid须加在元素自身，禁与Flex/Grid混用。

直接说结论：columns 能自动流转，但只对连续块级流生效；它不是“智能分块”，而是“切文本流”，所以别指望它按卡片或模块切，否则内容会被劈开。

为什么 columns 在响应式下经常“没反应”

根本原因不是写法错，而是容器没满足两个硬条件：必须是块级格式化上下文（display: block 或 inline-block），且内容得形成连续块级流、有足够宽度可分配。

• 父容器用了 display: flex 或 float —— columns 完全失效，因为脱离了块级流
• 容器设了固定 height 但内容太短 —— 浏览器判断“没必要分”，直接退成单列
• 写了 column-count: 4 但容器宽度只有 200px —— 它最多出 2 列，不会压缩文字硬凑
• 内容里全是 <span></span> 或未闭合的 <p></p> —— 缺少块级边界，列平衡算法无法启动

column-width 比 column-count 更适合响应式正文

column-width 是弱提示，告诉浏览器“每列至少这么宽”，列数由容器动态算出；column-count 是强约束，窄屏下会把字挤得很小。实际中，column-width 更安全。

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

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

下载

• 推荐写法：columns: 15rem 或 column-width: 25vw —— 相对单位比 px 更适应不同设备
• 避免同时写 column-count 和 column-width —— 浏览器会丢弃其中一个，Chrome 优先认 column-count，Firefox 可能相反
• 小屏降级要显式设 column-width，比如 @media (max-width: 480px) { .article { column-width: 100%; } }，否则只写 column-count: 1 常无效

防止文字/图片被劈成两半的关键操作

break-inside: avoid 只对正常流中的块级元素起作用，而且必须加在要保护的元素自身上，不是父容器。

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

• 给常见块级内容批量加：article > * { break-inside: avoid; }
• <img alt="响应式页面中如何使用CSS columns实现多列布局的自动流转？" > 默认是 inline，必须先加 display: block，再加 break-inside: avoid
• <h2></h2>、<pre class="brush:php;toolbar:false;"></pre>、<figure></figure> 这类标签建议单独加规则，别依赖通配
• Safari ≤13.1 不支持 break-inside 对某些元素生效，真机测试比模拟器更可靠

和 Flex/Grid 混用时的实际避坑方式

多列布局和 Flex/Grid 的渲染上下文冲突，不能套着用。外层用 Grid 控结构，内层用 <div class="columns"> 包正文，才是稳妥路径。<ul> <li>错误写法：<code>.grid-item { column-count: 3; } —— grid item 不是块级流，columns 不触发

正确结构：外层 display: grid 控卡片排列，每个卡片内部用独立的 <div class="text-columns"> 包段落，再对其设 <code>column-width

column-span: all 只在 columns 父容器的**直系子元素**上生效，且需确保该元素是块级（display: block）

别用 column-fill: balance 做响应式切换 —— 小屏下容易引发回流，改用 column-fill: auto

真正难处理的不是怎么写属性，而是预期管理：columns 解决的是报纸式长文本流转，不是卡片式瀑布流。如果内容高度不一、含异步加载图片、或需要跨列标题精准对齐，它大概率会给你意外结果。上线前务必在 iOS Safari 和微信 WebView 里实测切分效果，开发工具里的预览常不准。