column-count 和 column-width 是轻量多列方案，仅适用于文章正文等流式内容；column-count 强制列数，column-width 动态适应，推荐组合 column-width、column-gap、column-rule，并加 break-inside: avoid 防截断，移动端须用媒体查询重置为单列。
column-count 和 column-width 是最轻量、最直接的多列自适应方案，但只适用于「内容流式分栏」场景——比如文章正文、长列表、说明文档。它不是用来排卡片、导航或表单的。
什么时候该用 column-count 而不是 column-width
两者互斥，选一个就行，别同时设：
- column-count: 3 强制分 3 列，哪怕内容只有两行，也会空出三列宽度；适合内容量稳定、设计稿明确要求列数的场景
- column-width: 16rem 告诉浏览器“每列至少这么宽”，实际列数由容器宽度动态决定；更适合响应式，尤其移动端需避免文字过窄
- 真实项目中更推荐组合写法：column-width: 16rem; column-gap: 1.5rem; column-rule: 1px solid #eee;，既保可读性，又留视觉分隔
break-inside: avoid 必须加，否则内容会被劈开
默认情况下，<h3></h3>、<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<img> 可能被截断在两列之间，比如标题一半在第一列、一半在第二列。
必须显式禁止：
h2, h3, p, img {
break-inside: avoid;
}
注意：
- Safari 14 以下需加前缀：-webkit-column-break-inside: avoid
- display: inline-block 或 float 元素天然不跨列，但会破坏文档流，慎用
- 不要对整个容器设 break-inside，它只对子元素生效
移动端必须用媒体查询重置列数
硬写 column-count: 3 在手机上会导致每列只有 100px 宽，字挤成一团，阅读体验极差。
务必配合断点：
@media (max-width: 768px) {
.article-content {
column-count: 1;
column-gap: 0;
}
}
常见陷阱：
- 忘了重置 column-gap，小屏下留大间隙显得空洞
- 用 min-width 替代媒体查询，不可靠，viewport 缩放时行为不一致
- 在 上全局设多列，导致导航、页脚也被分栏——多列只应作用于明确的内容容器
真正难的不是写对那几行 CSS，而是判断「这段内容是否真的适合多列」：新闻正文、帮助文档、法律条款可以；用户头像网格、商品卡片、侧边菜单不行。多列布局是内容排版工具，不是通用布局引擎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
