[分享]css3平均分布多行居左

 CSS3平均分布多行居左是一种非常常用的布局方法。通过此方法，我们可以轻松地实现多个元素在同一行上平均分布，同时也可以让这些元素在多行上居左对齐。下面让我们一起来看看具体实现方法。 我们首先需要将要...

 CSS3平均分布多行居左是一种非常常用的布局方法。通过此方法，我们可以轻松地实现多个元素在同一行上平均分布，同时也可以让这些元素在多行上居左对齐。下面让我们一起来看看具体实现方法。
我们首先需要将要实现该布局的元素都放在一个容器中，比如说，我们现在有五个元素，分别为a、b、c、d和e，那么我们首先可以这样写这个容器的HTML代码：

<div class="container">
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p>d</p>
    <p>e</p>
</div> 

接下来，我们需要设置这个容器的CSS样式。在样式表中，我们首先将这个容器的布局方式设置为“flex”，然后再设置其在多行上的居左对齐，如下所示：

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
} 

其中，“display: flex;”表示我们要使用Flex布局，而“flex-wrap: wrap;”则表示我们要启用Flex容器的换行功能。最后，我们还可以用“justify-content: flex-start;”让容器内的元素在多行上居左对齐。
最后，我们还可以在CSS样式表中给每个元素单独设置宽度，以实现他们平均分布的效果，如下所示：

.container p{
    width: 20%;
} 

通过设置所有元素的宽度为20%，我们就可以轻松地实现它们的平均分布。
综上所述，通过使用CSS3平均分布多行居左的方法，我们可以实现多个元素在同一行上的平均分布和多行上的居左对齐。这种布局方式非常便利，也非常实用，能够大大提高我们的开发效率和编码体验。