CSS 实现平均分布，自适应换行，不限数量
要实现一个在CSS中的平均分布、自适应换行、不限制数量的布局，可以使用Flexbox布局。以下是一个简单的例子，演示了如何使用Flexbox来实现这样的布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Average Distribution</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
}
.item {
flex: 1;
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<!-- ... 更多的.item元素 -->
</div>
</body>
</html>在这个例子中，.container 是一个使用Flexbox布局的容器，其 flex-wrap: wrap; 属性确保当项目无法在一行内显示时，它们会自动换行。.item 是容器中的子元素，它们通过 flex: 1; 平等地分配可用空间，justify-content: space-around; 确保子元素在水平方向上均匀分布，即使在第一行也是如此。
这个布局适用于所有现代浏览器，并且能够适应不同的屏幕和窗口大小。子元素.item可以自由地增加或减少，Flexbox 会相应地调整它们的大小和数量。
评论已关闭