[分享]css3把图片整齐罗列

CSS3是前端开发中比较重要的一部分，它提供了许多强大的特性，其中之一就是将图片整齐罗列在页面上。

.item {
    display: flex;
    flex-wrap: wrap;
}
.item img {
    width: 33.33%;
    margin: 0;
} 

如上代码所示，我们首先创建了一个class名为“item”的容器并设置其显示为flex，这样我们就可以很方便地将其内部的子元素进行整齐的排列了。

接着，我们通过设置“flex-wrap: wrap”将子元素在容器内进行换行，这样当我们的图片数量较多时，它们就会自动换行，不会影响整体布局。

最后，我们给子元素设置“width: 33.33%”来实现将三张图片均分三列的效果，同时为了保持图片之间的距离一致，我们还将“margin”设为0。

通过这种方式，我们可以很容易地实现将多张图片整齐排列在页面上，达到美观的效果并提升用户体验。