介绍
Flexbox 是一种用于管理盒状模型（如 HTML 中的块元素和行内元素）布局的 CSS3 模块。它提供了一种更加灵活的方式来布局页面上的元素，并且可以实现流式布局。这是一种可以动态地适应不同浏览器和设备大小的布局方式，可以使我们的页面适应不同的屏幕大小，而不需要手动调整布局。
在本文中，我们将探讨 Flexbox 的三种流式布局方法，并提供示例代码来帮助您更好地理解每种方法的实现。我们还将深入探讨每种方法的优缺点，并提供指导意义，帮助您了解如何在您的项目中选择最适合您需求的方法。
方法一：使用 flex-wrap
flex-wrap 是用于在换行时自适应内容的 CSS 属性。它允许容器内的元素在每行的末尾自动换行，并将剩余空间分配给下一行。这是实现流式布局最简单的方法之一。
下面是一个使用 flex-wrap 实现流式布局的示例代码：
.container {
display: flex;
flex-wrap: wrap;
}
.container div {
width: 50%;
}在上面的代码中，我们将 .container 元素设为 display: flex，并添加了 flex-wrap: wrap。这意味着 .container 内的元素将在每行的末尾换行，并自动适应内容。我们还在 .container div 上设置了 width: 50%，这样每个元素都会占据父容器的一半宽度。这样，我们就实现了一个流式布局。
优点：使用 flex-wrap 实现流式布局最简单，且易于理解和实现。
缺点：如果您的元素中有不同大小的子元素，可能会导致页面的视觉效果不佳，还需要调整元素大小或位置来完成布局。此外，它不能实现很多高级布局需求，例如垂直布局和平均分配空间。
方法二：使用 calc()
另一种实现流式布局的方法是通过 calc() 函数来设置元素的宽度。calc() 可以计算数学表达式，返回结果用作 CSS 属性中的值。这可以让我们在 CSS 中动态计算元素的宽度。
下面是一个使用 calc() 实现流式布局的示例代码：
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
-
---------- --- -
------ -------- - ------
------------- -----
-------------- -----
-在上面的代码中，我们将 .container 元素设为 display: flex，并添加了 flex-wrap: wrap。然后，我们使用 calc() 函数计算每个子元素的宽度为父容器宽度的一半减去20个像素。可以通过增加或减少减去的像素值来控制每个元素的宽度。
我们还将每个元素设置为 margin-right: 40px 和 margin-bottom: 40px，这样每个元素之间就有了一些间距。这是因为我们使用了 calc() 来计算我们的宽度，而且由于我们希望我们的所有元素保持相同的宽度，所以需要一些额外的样式来管理每个元素之间的间距。
优点：使用 calc() 函数可以更加精确地控制元素的宽度，并能够实现间距和大小的动态调整。
缺点：您必须手动计算每个元素的宽度，这可能会变得很繁琐，并会出现计算错误的风险。
方法三：使用 JavaScript
最后一种实现流式布局的方法是使用 JavaScript 来计算每个元素的宽度和位置。这种方法非常灵活，可以实现很多高级布局需求。但是，它需要更多的代码，并需要更高的技能水平。
下面是一个使用 JavaScript 实现流式布局的示例代码：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
--------- ---------
-
----- -
--------- ---------
-
------ ------ --- ----------- ------ -
----- -
------ ----
-
-
------ ------ --- ----------- ------ -
----- -
------ --------
-
--- -------------------- ---- -------
--- ----- - -----------------------------------
--- --------- - -------------------------------------
-------- -------------------- -
--- ---- - - -- - - ------------- ---- -
--- ---- - ---------
--------------- - ----
-------------- - -------------- - -----
-
-
-------- ------------ -
--- -------------- - ----------------------
--- ---------- - ---
--- ---- - - -- - - ------------- ---- -
--- ---- - ---------
--- ---- - -----------------------------
--- --------- - -----------
---------------------------
-
--- --------- - --
--- -------- - --
--- ---------- - --
--- ---- - - -- - - ------------- ---- -
--- ---- - ---------
--- --------- - --------------
-- --------- - --------- -- --------------- -
---------- - --
-------- - --
--------- -- --------- --- - - ----------------- - ----------
-
--------------- - ---------- - -----
-------------- - --------- - -----
---------- -- ----------
-------- -- ----------
-
-
---------------------
-------------
--------------------------------- ------------在上面的代码中，我们在 HTML 中定义了一个 .container 容器和一些 .item 元素。在 CSS 中，我们将容器设为 display: flex，并添加了 flex-wrap: wrap。我们还设置 .item 元素为 position: absolute。在 JavaScript 中，我们首先通过 setInitialPosition() 函数设置每个元素的初始位置。然后，我们通过 placeItems() 函数计算每个元素应处的位置，并将它们放置在正确的位置上。
在我们的 JavaScript 代码中，我们使用了一个名为 getBoundingClientRect() 的方法来获取每个元素的大小和位置。我们还使用了一个名为 clientWidth 的方法来获取容器的宽度。
我们定义了两个媒体查询，针对不同的屏幕尺寸设定 .item 元素的宽度。然后，我们将窗口调整事件绑定到 placeItems() 函数上，这样每当窗口大小发生变化时，我们都会重新计算和放置元素的位置。
优点：可以实现很多高级布局效果，例如自定义间距和垂直布局。
缺点：代码量和技能要求较高。
结论
在选择适当的方法时，您需要考虑您的项目的特定需求。如果您正在寻找一种简单而快速的解决方案，您可以使用 flex-wrap。如果您需要更加精确地控制每个元素的宽度和间距，您可以使用 calc() 函数。如果您的项目需要更高级的布局需求，您可能需要使用 JavaScript 来实现。
总之，Flexbox 是一种非常有用的 CSS 模块，可以帮助我们更好地管理页面元素的布局和排版。无论您选择哪种方法，您都可以使用 Flexbox 实现具有适应性的流式布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e6ccde9a7045d0d69a28b