什么是 Flexbox
Flexbox 是一种 CSS 布局模式，它能够更好地控制元素在容器中的布局和对齐方式。Flexbox 主要是通过创建网格来控制元素的位置和大小，使得元素更加灵活和可自适应性。
折叠菜单布局效果
折叠菜单布局效果通常用于垂直菜单自适应排列的场景，可以在菜单过长的时候隐藏菜单项，展开或收起子菜单。这种效果具有一定的操作性和体验性，在前端开发中非常常见。
Flexbox 实现折叠菜单布局效果
在使用 Flexbox 实现折叠菜单布局效果时，需要注意以下要点：
- 使用
display: flex;属性将菜单项容器设置为弹性盒子； - 使用
flex-direction: column;属性将菜单项沿垂直方向排列； - 使用
justify-content: space-between;属性设置菜单项之间的间距； - 使用
overflow: hidden;和height: 0;属性来隐藏子菜单项； - 使用 JavaScript 控制子菜单的展开和收缩。
下面是一个示例代码。
HTML 代码：
-- -------------------- ---- -------
---- -------------
---- ---------------- -------
---- ----------- -----------
--- -
--- --------------
-------- ------
-------- ------
-------- ------
-------- ------
-----
------
---- ----------- -----------
--- -
--- --------------
-------- ------
-------- ------
-------- ------
-----
------
---- ---------------- -------
---- ---------------- -------
------CSS 代码：
-- -------------------- ---- ------- ----- - -------- ----- --------------- ------- ---------------- -------------- ------ ------ ------- ------ - ----- - -------- ----- ------------ ------- ------- ----- ------- --- ----- ----- -------- - ----- - ---------- - --------- --------- - ------ - --------- --------- ---- ----- ----- -- -------- ---- ------ ----- --------- ------- ------- -- ----------------- ----- ------- --- ----- ----- - ------ -- - ------- ----- ------------ ----- -------------- --- ----- ----- -------- - ----- ------- -------- - ------ -------- - ----------------- -------- - ----- - ------- ----- -
JavaScript 代码：
document.querySelectorAll('.has-child').forEach(item => {
item.addEventListener('click', () => {
item.querySelector('.child').classList.toggle('show');
})
})总结
Flexbox 是一种非常优秀的 CSS 布局模式，能够帮助我们更好地控制元素在容器中的布局和对齐方式。而折叠菜单布局则是在前端开发中非常常见的一种效果，具有一定的操作性和体验性。使用 Flexbox 实现折叠菜单布局效果是比较容易的，只需要注意一些细节和使用 JavaScript 控制子菜单的展开和收缩即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459ea2a968c7c53b0c03726