css中插入多张图片排布

    CSS中，我们要插入多张图片并且让它们排布起来是一件非常常见的事情。以下是几种常见的排布方式。

/* 水平排列 */
.container {
  display: flex;
  justify-content: space-between;
}

/* 垂直排列 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 网格排列 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
} 

    在这些排布方式中，我们使用了flex和grid两种CSS布局方式。在水平和垂直排列中，我们使用了flexbox来将图片进行排列。我们使用了display:flex来将容器元素设为flex容器。利用justify-content和align-items的属性值来对内容进行排列。这样，只需要更改justify-content和align-items的属性值就可以改变内容的排列方式。

    在网格排列中，我们使用了grid布局方式。我们使用了display:grid以将容器元素设置为grid容器。通过grid-template-columns属性来定义了列数，这里我们设置为3。接着，用grid-gap属性定义了图片之间的空隙。这样，我们就可以轻松地将多张图片进行网格排列。

    当然，这仅仅是多张图片排布的几种示例，我们还可以使用更加复杂的排布方式。但是，学习和了解基础的排布方式是非常重要的。