CSS Flexbox 是一种 CSS 布局模式，它允许开发者对页面中的元素进行灵活的排列。在前端开发中，我们可以使用 Flexbox 来实现各种布局效果，包括联动列表。
联动列表是指两个或多个列表之间通过选择某一项，让另一个列表中的内容根据选择的项进行展示的交互形式。这个功能在实际开发中很常见，它可以让用户更方便地浏览和筛选数据。
在这篇文章中，我们将介绍如何使用 CSS Flexbox 实现一个基本的联动列表，并提供例子代码。
创建 HTML 结构
首先，我们需要在 HTML 中创建两个列表：一个用于用户选择，另一个用于展示选择项下的相关内容。这两个列表可以使用 <ul> 和 <li> 标签来实现。代码如下：
-- -------------------- ---- ------- --- ---------------- ---------- ------ ---------- ------ ---------- ------ ----- --- ----------------- ----------- ------ ----------- ------ ----------- ------ -----
使用 Flexbox 布局
在上一步中，我们已经创建了两个列表。但是，我们需要使用 CSS 来让它们以联动的形式展示。
首先，在父元素中添加 display:flex 属性，以启用 Flexbox 布局。为了让两个列表显示在一行上，我们需要给它们的父元素设置 flex-direction: row，这将使元素从左到右排列。还需要添加 flex-wrap: nowrap，这将防止列表折行。
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}接下来，我们需要添加 flex-basis 和 flex-grow 属性，使两个列表在容器中占据相应的空间。在这个例子中，我们将选择列表和内容列表的占比分别设置为 1：3，因此代码如下：
-- -------------------- ---- ------- -------- - ----------- ---- ---------- -- - --------- - ----------- ---- ---------- -- -
这将使左侧的选择列表占据 25% 的空间，右侧的内容列表占据 75% 的空间。另外，我们通过 flex-grow 属性指定了两个列表在容器中的相对大小。
添加交互效果
现在，我们已经使用 CSS Flexbox 实现了联动列表的基本功能。但是，我们还需要添加交互效果，使得选择一个选项后，在右侧的列表中展示相应的内容。
我们可以使用 JavaScript 来实现这个功能。具体来说，我们需要使用事件监听器在选择列表中监听 click 事件，并在右侧的内容列表中更新展示的内容。这将涉及到一些 DOM 操作和 CSS 类添加/移除。
-- -------------------- ---- -------
----- ------- - ----------------------------------- -----
------------------------ -- -
-------------------------------- -- -- -
-- ---------
----- ------------ - -------------------------------- ------------
-- -------------- -
----------------------------------------
-
-- --------
-------------------------------
-- -----------
----- ----------- - ------------------------------------ -----
----------------------------- -- -
-- ----------------------- --- ------------------- -
------------------------------
- ---- -
---------------------------------
-
---
---
---以上代码将监听选择列表中每个选项的点击事件。当用户点击某个选项时，该代码将先移除当前选中的项目的 CSS 类“active”，然后将新的选中项目添加相应的 CSS 类“active”。
接下来，该代码将遍历右侧的内容列表，并根据当前选择的项目设置 CSS 类“show”。这样，右侧的内容列表就会显示与选择列表中当前选中的项相应的内容。
总结
在这篇文章中，我们介绍了如何使用 CSS Flexbox 实现联动列表的基本功能。我们使用了 HTML 和 CSS 创建两个列表，并使用 Flexbox 布局将它们在一行内对齐。我们还添加了 JavaScript，以便在选择列表中选择选项时更新右侧的内容列表。
这个例子虽然简单，但它涵盖了 CSS Flexbox、HTML 和 JavaScript 三个主要前端技术。通过实践这个例子，我们可以更好地理解这些技术，同时还可以了解联动列表功能的实现方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e3a0695b1f8cacd5e6fc5