css3 等分3列

CSS3提供了非常便捷的方法来实现网页中的多列布局，其中最常见的就是等分3列。我们可以使用CSS3中的flexbox属性来实现这个效果。

.container {
    display: flex;
    flex-wrap: wrap;
}
.column {
    flex: 1;
}

首先，我们需要将包含3个列的容器设置为display: flex属性，使其变成一个flex容器。接着，我们将flex-wrap属性设置为wrap，使得列可以自动换行。

然后，针对每一个列，我们需要设置一个flex属性，这个属性会决定每个列在容器中的空间。为了等分3列，我们可以将每个列的flex值都设置为1。

接下来，我们可以添加一些样式来优化我们的多列布局。例如，我们可以添加一些padding来让每一列看起来更好看，也可以添加一些背景色来让多列布局更加明显。

.column {
    flex: 1;
    padding: 10px;
    background-color: #f2f2f2;
}
    

通过上述的CSS代码，我们可以很轻松地实现一个等分3列的多列布局，这个布局可以适用于很多场景，例如网站的侧边栏、文章列表等。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！