这段代码会创建一个三列的布局，每列的宽度会自动调整以填满可用空间。如果你想要确保列表项至少有一定的宽度，可以使用min-width属性。使用flex: 1;确保列会均分空间，如果有多余的空间，可以通过设置margin来调整列之间的间距。
<ul class="columns">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
.columns {
display: flex;
flex-wrap: wrap;
list-style-type: none; /* 移除列表的标记 */
padding: 0; /* 移除默认的内边距 */
}
.columns li {
flex: 1; /* 让所有列占据等分的空间 */
margin: 5px; /* 添加外边距 */
box-sizing: border-box; /* 确保边距不会导致宽度增加 */
break-inside: avoid; /* 避免在分页时将项目分开 */
min-width: 200px; /* 设置最小宽度，防止过度缩小 */
}
