div+css实现内容两列、三列或多列分栏
原文中文，约900字，阅读约需3分钟。
📝
内容提要
本文介绍了使用CSS实现竖排的技巧，通过控制writing-mode属性和flex布局，可以实现从左到右竖排的效果。
🔎
延伸解读
核心机制：writing-mode 与 flex 的配合
文章通过 writing-mode 属性改变容器和子项的书写方向来实现分栏。父容器设为 vertical-lr 后，内容变为竖列从左到右排列；子项再设 horizontal-tb 恢复横排文字。配合 flex-wrap: wrap 让子项在竖列方向换行，从而形成多列布局。整个过程无需 JavaScript，纯 CSS 即可完成。
列数控制：子项宽度的百分比含义
在 vertical-lr 的父容器中，子项的 width 百分比决定列数。文章示例中 width: 50% 表示两列，并指出 25% 则对应四列。这是因为父容器宽度固定，子项宽度占比直接划分出列数。调整这个百分比即可灵活改变分栏数量，无需修改 HTML 结构。
子项方向纠正：horizontal-tb 的作用
父容器设为 vertical-lr 后，子项默认也会继承竖排方向，导致文字竖排。文章通过给子项设置 writing-mode: horizontal-tb，将每个子项内部的文字恢复为横排、从上到下叠放。这样既保留了父容器的竖列分栏效果，又保证了子项内容的正常阅读方向。
❓
Q&A
如何使用CSS实现竖排效果？
通过设置writing-mode属性为vertical-lr，可以实现从左到右的竖排效果。
实现竖排效果时需要使用JavaScript吗？
不需要，整个过程只需使用CSS即可实现竖排效果。
如何控制内容的排列方向？
通过设置子项的writing-mode属性为horizontal-tb，可以将内容纠正为横排，从上到下叠放。
示例代码中如何设置列的数量？
通过设置子项的宽度，例如width: 50%可以实现两列，width: 25%可以实现四列。
flex布局在竖排效果中起什么作用？
flex布局用于控制列的排放和项的方向，使内容能够灵活排列。
如何使用CSS实现多列分栏？
通过调整主容器的宽度和子项的宽度，可以实现多列分栏效果。
🏷️
