纯CSS实现列表项布局的动态转换：水平到垂直
许多前端开发者都面临这样的挑战：如何根据列表项的总宽度，动态调整列表的布局方向，例如，当总宽度超过某个阈值时，从水平排列切换到垂直排列。本文将演示如何仅使用CSS实现这一效果，并对一个具体案例进行分析。
假设我们有一个无序列表元素，每个的宽度不固定。当所有元素的总宽度超过300像素时，希望列表从水平排列转换为垂直排列。我们可以利用CSS的Flexbox布局轻松解决这个问题。关键在于flex-wrap: wrap;属性。该属性允许元素在达到容器边界时自动换行，从而实现水平到垂直的平滑过渡。
以下CSS代码展示了如何实现这种动态布局转换：
立即学习“前端免费学习笔记（深入）”；
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* 包含内边距和边框在元素总宽度内 */
}
ul {
display: flex;
flex-wrap: wrap;
width: 300px;
max-height: 400px; /* 设置最大高度，防止内容溢出 */
overflow-y: auto; /* 添加滚动条，方便查看超出部分 */
}
li {
flex-grow: 1; /* 允许项目占据可用空间 */
padding: 8px;
}
这段代码首先将flex-wrap: wrap;属性，允许列表项自动换行。width: 300px;限制了列表的总宽度，作为阈值。max-height和overflow-y: auto确保内容超出设定高度时，出现滚动条。flex-grow: 1; 确保每个元素在同一行内平均分配剩余空间。box-sizing: border-box; 应用于所有元素，确保内边距和边框不会影响元素总宽度的计算。
当元素总宽度超过300像素时，它们会自动换行到下一行，从而实现垂直排列。通过这种简洁的CSS代码，我们实现了从水平到垂直的动态布局转换，无需任何JavaScript代码。
