Flexible Box Layout，简称 Flexbox 布局，是一个 CSS3 的新属性，它能够简化在容器中进行项目排列的过程。
在前端开发中，使用 Flexbox 布局可以实现众多常见的页面布局需求，例如实现点击展开折叠的解决方案。本篇文章将详细介绍 Flexbox 布局以及如何使用它来实现点击展开折叠功能。
Flexbox 布局简介
Flexbox 布局中，容器需要被指定为 flex 容器，即设置 display: flex;。其子元素会自动变为 flex 项目。一旦 flex 容器设置完成，项目间间距和对齐方式就可以由 Flex 布局自动计算和调整。
我们先来看下面的例子：
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
---------- - -------- ----- ---------------- ------- ------------ ------- -
以上代码中，我们将 .container 设置为 flex 容器，并使用 justify-content 和 align-items 属性将 .item 元素垂直居中。
下面分别介绍一下 justify-content 和 align-items 的常见属性值：
justify-content
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中对齐
- space-between：等间距对齐，首尾不对齐
- space-around：等间距对齐，首尾对齐
align-items
- stretch（默认值）：高度拉伸填充整个容器
- flex-start：顶部对齐
- flex-end：底部对齐
- center：居中对齐
- baseline：第一行文字的基线对齐
除了上述两个属性，Flexbox 布局还包括 flex-direction、flex-wrap、flex-flow、align-content、order、flex-grow、flex-shrink 和 flex-basis 这些常用属性，读者可自行了解。
实现点击展开折叠
下面我们来介绍如何使用 Flexbox 布局实现点击展开折叠的效果。
首先，我们来设计一个折叠效果的 HTML 和 CSS 结构：
---- ------------------
---- -------------
---- ------------------------
---- ----------------
----------------
----------------
------
------
---------------- - -------- ----- --------------- ------- ------------ ------- ------ ---- ------- - ----- - ----- - ------ ----- ------- ----- - ------ - ---------- ----- ------------ ----- ------- -------- - -------- - ------- -- --------- ------- ----------- ------ ----- -
以上代码中，我们将 .container 设置为垂直的 flex 容器，并居中对齐。.item 作为每一个折叠内容的容器，其宽度为 100%。.title 属于每一个折叠内容的标题，设置了字体大小、字重以及 cursor 属性实现鼠标点击效果。.content 初始高度为 0，overflow 属性为 hidden 隐藏，transition 属性用于实现平滑过渡效果。
接下来，我们使用 JavaScript 代码实现折叠效果：
----- ----- - ---------------------------------
----- ------- - -----------------------------------
--- -------- - ------
------------------------------- -- -- -
-- ---------- -
-------------------- - --
- ---- -
-------------------- - -------
-
-------- - ----------
---以上代码中，我们先用 querySelector 选择器选择 .title 和 .content 元素，由于初始状态下折叠内容处于收起状态，因此我们首先将 isOpened 设置为 false。接着，通过 addEventListener 绑定点击事件，在点击标题时根据 isOpened 的状态加以判定，弹出或收起折叠内容。最后，我们更新 isOpened 的状态为当前状态的取反。
总结
本文通过介绍 Flexbox 布局以及使用实例详细讲解了如何实现点击展开折叠的效果。希望读者在阅读本文后能够掌握 Flexbox 布局的基本知识和实现点击展开折叠的技巧。
完整示例代码已上传至 GitHub。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646edf26968c7c53b0d41b65