在 Web 开发领域，页面的布局一直是一个重要的话题。而在前端开发中，Flexbox 已经成为一个非常有用的工具。Flexbox 可以帮助我们通过简单的 CSS 代码，实现多图并列布局，而不需要像以前一样使用 float 和 position 之类的传统定位。
Flexbox 然而不是最新的 CSS 技术，但它已被现代浏览器所支持。本文将介绍如何使用 Flexbox 实现多图并列布局。
准备工作
在介绍 Flexbox 之前，我们需要了解一些 HTML 和 CSS 基础知识。首先，你需要创建一个 HTML 文件，并在其中包含多张图片。例如：
<div class="image-container"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div>
接下来，我们需要添加一些 CSS 样式来为这些图片创建一个父级容器，如下所示：
.image-container {
display: flex;
flex-wrap: wrap;
}我们将父元素的 display 属性设置为 flex，这将让子元素（即图片）自动排列。我们还可以加上 flex-wrap: wrap 来让图片在需要的时候进行换行。
接下来，让我们看看如何设定图片的大小和间距。
.image-container img {
flex: 1 1 30%;
margin: 10px;
}我们使用 flex 属性和 margin 属性来设置图片的大小和间距。首先，设定图片的 flex 属性。这个属性包括三个值：一个缩放比例、一个空间占据比例和一个基准大小。在这里，我们把缩放比例和空间占据比例都设为 1，以便使每个图像占据相同的空间。基准大小设为 30%，以确保所有图像在视图中等宽。
随后，通过 margin 属性来控制图片之间的距离。增加 margin 来实现开流布局并为图像之间添加间距。
示例代码
最终代码如下。您可以尝试在本地环境下运行以下例子并查看效果。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ----------- --------------
-------
---------------- -
-------- -----
---------- -----
-
---------------- --- -
----- - - ----
------- -----
-
--------
-------
------
---- ------------------------
---- -------------------------------------------
---- ------------------------------------------------
---- ------------------------------------------
---- ------------------------------------------
---- ----------------------------------------
---- -------------------------------------------
---- ------------------------------------------------
---- ------------------------------------------
---- ------------------------------------------
---- ----------------------------------------
---- -------------------------------------------
---- ------------------------------------------------
---- ------------------------------------------
------
-------
-------
结论
使用 Flexbox 是一种方便快捷的方法来排列图片，并且在所有现代浏览器中得到支持。这比以前的方法如使用 float、display: inline-block 或者定位要更加简单和可预测。
当然，Flexbox 并不适用于所有情况，但是它的用途之广泛，特别是用于多图并列排列的情况下。
如果你还没有使用 Flexbox，那么现在是时候开始尝试一下了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6705e4a7d91dce0dc8559eb2