结论：优先用flex或grid搭配媒体查询，column-count仅适用于纯文本流；flex适合高度不一、动态列表，grid适合等宽卡片，column-count误用易导致布局崩溃。
直接说结论：用 display: flex 或 display: grid 搭配媒体查询，比用 float 或 inline-block 更可靠；column-count 只适合纯文本流式内容，别拿它排卡片或导航。
什么时候该用 flex 布局排列表项
当你需要控制对齐、换行、间距，且列表项高度不一、数量动态时，flex 是首选。它天然支持响应式折行和等分布局，调试直观。
- 给
ul设display: flex+flex-wrap: wrap，子项自动横向排列并换行 - 用
gap控制项间距离（比margin更干净，避免首尾多出空隙） - 每个
li设flex: 0 1 calc(50% - 8px)可实现移动端两列、桌面端四列，无需 JS - 务必加
list-style: none和重置margin/padding，否则默认样式会干扰布局 - 注意 IE11 不支持
gap，需回退为margin并手动处理首尾项
grid 布局更适合等宽卡片类列表
如果你的列表项是商品卡片、技能图标这类宽度一致、结构规整的内容，grid 比 flex 更省力，列数能随容器宽度自适应。
- 写法示例：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 这个写法让每列至少 280px 宽，不够就自动减少列数，填满容器
-
auto-fit会收缩空列，auto-fill则保留空位，多数场景选auto-fit - 卡片内文字溢出要用
overflow: hidden+text-overflow: ellipsis，否则撑破网格 - 别在
grid容器里设justify-content: space-between，它对列间隙无效，应改用gap
column-count 不是万能的，用错场景会出问题
column-count 看似简单，但只适用于段落、条款、说明文字这类纯内容流，一旦混入按钮、图片、表单控件，就容易崩。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：
column-count: 3硬写在手机上，导致每列只有 100px 宽，文字挤成一条线 - 必须配合媒体查询降级：
@media (max-width: 768px) { column-count: 1; } - 必须加
break-inside: avoid到li或p上，否则标题或图片被劈成两半 -
column-gap默认是 1em，小屏下留太大空白，要显式设为0或更小值 - 别对整个
body或main设多列——页眉页脚也会被分栏，只作用于明确的内容容器
真正难的不是写对那几行 CSS，而是判断「这段列表到底算什么」：是语义化导航？是图文卡片墙？还是长篇文档段落？选错布局模型，后面所有适配都会绕弯路。
