在前端开发中，经常需要实现一些“收起展开”的效果，比如展开/收起菜单、展开/收起列表等。使用 CSS Flexbox 布局可以轻松实现这些效果，并且能够适应不同屏幕尺寸和设备。
什么是 Flexbox 布局
Flexbox 布局是一种 CSS 布局模式，它可以让容器中的子元素自动排列，并且可以控制它们的大小、间距和对齐方式。Flexbox 布局的主要思想是让容器中的子元素按照一定的比例和规则排列，从而实现灵活的布局。
Flexbox 布局有两个重要的概念：容器和子元素。容器是指包含子元素的元素，而子元素是指直接包含在容器中的元素。在 Flexbox 布局中，容器的属性会影响子元素的排列方式、大小和对齐方式。
实现 “收起展开” 的效果
下面我们就来看一下如何使用 CSS Flexbox 布局实现“收起展开”的效果。
HTML 结构
首先，我们需要创建一个 HTML 结构来实现“收起展开”的效果。这里我们以一个展开/收起列表为例：
---- -------------
---- -------------
--------------
------------------
------
---- -------------
--------------
------------------
------
---- -------------
--------------
------------------
------
------在这个 HTML 结构中，我们使用了一个包含多个子元素的容器 .list，每个子元素都是一个列表项 .item，其中包含一个标题和一段内容。
CSS 样式
接下来，我们需要使用 CSS 样式来实现“收起展开”的效果。这里我们使用 Flexbox 布局来控制列表项的排列方式和大小。
----- - -------- ----- --------------- ------- - ----- - ------- --- ----- ----- -------------- ----- -------- ----- - ----- -- - ----------- -- - ----- - - -------------- -- --------- ------- -------------- --------- ------------ ------- - --------------- - - -------- ----- -
在这个 CSS 样式中，我们首先将列表容器 .list 的 display 属性设置为 flex，并将子元素的排列方向设置为 column，表示垂直排列。
然后，我们为每个列表项 .item 设置了一些基本样式，包括边框、外边距和内边距。其中，标题的顶部外边距和内容的底部外边距都被设置为了 0，以保证列表项之间的间距合适。
为了实现“收起展开”的效果，我们使用了一个 collapsed 类来控制列表项的展开和收起。当列表项的内容被收起时，我们将其内部的内容区域隐藏起来，只显示标题。
--------------- - - -------- ----- -
JavaScript 代码
最后，我们需要使用 JavaScript 代码来实现列表项的展开和收起。这里我们使用了 jQuery 库来简化代码，但也可以使用原生 JavaScript 实现。
---------------------------- -
-------------------------- -
--- ----- - --------
--- ------- - ----- ---------------------
------------------------ -
-------------------------------
------ ------
---
----------------------
---
---在这个 JavaScript 代码中，我们首先使用 jQuery 库的 $(document).ready() 函数来等待页面加载完毕。然后，我们使用 .each() 函数遍历每个列表项，并为每个列表项添加一个“展开/收起”按钮。
当用户点击“展开/收起”按钮时，我们使用 toggleClass() 函数来切换列表项的 collapsed 类，从而控制列表项的展开和收起。
总结
使用 CSS Flexbox 布局可以轻松实现“收起展开”的效果，并且能够适应不同的屏幕尺寸和设备。通过上面的示例，我们可以看到如何创建一个基本的展开/收起列表，并使用 JavaScript 代码来控制列表项的展开和收起。希望这篇文章能够对你学习和使用 Flexbox 布局有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663ed87dd3423812e4d147d0