css中如何让图片均匀分布

CSS中如何让图片均匀分布
在网页设计中，图片是不可或缺的元素之一。然而，当我们希望在页面上展示多张图片时，如何让它们均匀分布呢？下面我们将介绍CSS中如何实现这一效果。
首先，我们来看一个简单的例子：

<div class="container">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
</div> 

这是一个包含四张图片的容器，我们希望让它们均匀分布。我们可以使用CSS中的Flexbox布局来实现这个效果。
1. 设置容器为Flexbox布局：

.container {
  display: flex;
} 

2.在图片元素上使用Flexbox属性

img {
  flex: 1;
} 

这里使用flex属性是为了让图片元素自动平分容器的宽度。
最后，我们来看完整的代码：

<style>
.container {
  display: flex;
}
img {
  flex: 1;
}
</style>

<div class="container">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
</div> 

通过设置容器为Flexbox布局并在图片元素上使用Flexbox属性，我们很容易地就能实现多张图片在容器中均匀分布的效果。