CSS Flexbox 是一种布局方式，它可以让我们更方便地管理文档中的元素。本文将介绍如何使用 JavaScript 与 CSS Flexbox 结合使用，以实现更加动态的页面布局。
Flexbox 的基础知识
Flexbox 通过定义容器和项目的属性，来控制容器中的项目如何进行分布和对齐。容器被设置为 flex，并且其子元素可以使用 flex 属性来指定它们所占据的空间大小。
以下是一些常用的 Flexbox 属性：
justify-content: 控制子元素在主轴方向上的分布方式。align-items: 控制子元素在交叉轴方向上的对齐方式。flex-direction: 控制子元素的排列方向。flex-wrap: 控制子元素在容器中换行的方式。align-content: 控制行之间的对齐方式。
JavaScript 与 Flexbox 的结合使用
JavaScript 可以使用 DOM 操作来动态地修改 Flexbox 容器和项目的属性。例如，我们可以创建一个函数来控制容器中所有子元素的高度，以便它们能够自适应容器宽度。
function setFlexboxHeight() {
const container = document.querySelector(".flex-container");
const items = container.querySelectorAll(".flex-item");
items.forEach((item) => {
item.style.height = container.offsetWidth / items.length + "px";
});
}在这个例子中，我们查询了页面上所有带有 flex-container 类名的容器，以及其内部的所有 flex-item 元素。我们使用 forEach 循环遍历每个子元素，然后将它们的高度设置为容器宽度除以子元素数量得到的值。这样一来，无论容器宽度如何，所有子元素的高度都将相等。
我们可以通过为窗口的 resize 事件添加监听器来实现页面的自适应：
window.addEventListener("resize", () => {
setFlexboxHeight();
});在这个例子中，我们为窗口的 resize 事件添加了一个监听器，每当窗口大小发生变化时，就会调用 setFlexboxHeight 函数来重新设置子元素的高度。
示例代码
以下是一个简单的示例代码，展示了如何使用 JavaScript 来控制 Flexbox 容器和项目的属性。我们将创建一个带有四个子元素的 Flexbox 容器，并通过 JavaScript 控制子元素的高度，以实现自适应布局。
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------------
-------
--------------- -
-------- -----
---------------- -------
------------ -------
---------- -----
------- ------
-
---------- -
----- - - -----
----------------- -----
------- -----
-
--------
-------
------
---- -----------------------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
------
--------
-------- ------------------ -
----- --------- - ------------------------------------------
----- ----- - -----------------------------------------
-------------------- -- -
----------------- - --------------------- - ------------ - -----
---
-
--------------------------------- -- -- -
-------------------
---
-------------------
---------
-------
-------在这个示例中，我们首先定义了一个 flex-container 类名样式，使其展现为 Flexbox 容器。然后，我们定义了一个 flex-item 类名样式，使其展现为 Flexbox 容器内的项目元素。
在 JavaScript 部分，我们定义了 setFlexboxHeight 函数来动态地修改所有 flex-item 元素的高度。我们通过查询页面上所有带有 flex-container 和 flex-item 类名的元素，使用 forEach 循环设置子元素的高度为容器宽度除以子元素数量得到的值。
在最后，我们为窗口的 resize 事件添加了一个监听器，当窗口大小发生变化时，就会重新调用 setFlexboxHeight 函数来重新设置子元素的高度。
结论
以上是如何使用 JavaScript 与 CSS Flexbox 结合使用的一些示例。通过合理使用 JavaScript 操作 DOM 元素，我们可以实现更加动态和灵活的页面布局。如果您想进一步深入了解 Flexbox 和 JavaScript，可以继续探究更加高级的技术，例如使用 Flexbox 来创建动态用户界面，以及使用 JavaScript 来优化页面性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67750fa26d66e0f9aaf357b1