什么是 Flexbox？
Flexbox 是一种用于排列元素的 CSS 布局方式。它允许您通过容器中的不同方向的弹性空间来对齐和分布元素。Flexbox 是一种强大的布局方式，可以帮助您解决很多页面布局的问题。
导航栏折叠的需求
现在越来越多的网站都使用响应式设计，导航栏也需要满足在小屏幕下折叠的需求。而 Flexbox 可以很好的实现这个效果。
实现导航栏折叠的技巧及最佳实践
1. HTML 结构的设置
我们需要用一个父级容器将导航栏包裹起来，在父级容器内部，我们需要用一个子容器将导航栏每一个链接包裹起来。如下所示：
-- -------------------- ---- -------
---- ------------
---- ------------------
-- -----------------
-- ------------------
-- --------------------
-- -----------------
-- ------------------
------
------2. CSS 的设置
为了实现折叠效果，我们需要设置.nav-links 容器为 flex 容器，并通过设置 flex-direction: column 将导航链接垂直排列。同时，我们需要设置导航栏在一定宽度范围内居中，可以通过 margin: 0 auto 实现。如下所示：
-- -------------------- ---- -------
---- -
----------- -----
-------- -----
---------------- -------
------------ -------
------- -----
-------------- --- ----- --------
-
---------- -
-------- -----
--------------- -------
------------ -------
-
---------- - -
---------------- -----
------ -----
-------------- -----
-
------ ------ --- ----------- ------ -
---------- -
--------------- ----
------------ -----
-
---------- - -
------- - -----
-
-3. Javascript 的设置
为了实现折叠效果，我们需要用 Javascript 来动态更改.nav-links 的显示和隐藏。我们可以用以下代码实现：
const navLinks = document.querySelector('.nav-links');
const burger = document.querySelector('.burger');
burger.addEventListener('click', () => {
navLinks.classList.toggle('nav-links-show');
});4. 最佳实践
- 引入 CSS Reset 或 Normalize CSS
- 使用语义化的 HTML 标签
- 为了防止出现折叠效果错位的情况，建议在实现折叠的同时为导航栏链接设置 display: block;
示例代码
HTML:
-- -------------------- ---- -------
---- ------------
---- -------------------
-- -------- -------------------------
------- ---------------
-------------
---------
------
---- ------------------
-- -----------------
-- ------------------
-- --------------------
-- -----------------
-- ------------------
------
------CSS:
-- -------------------- ---- -------
---- -
----------- -----
-------- -----
---------------- -------
------------ -------
------- -----
-------------- --- ----- --------
-
----------- -
-------- -----
---------------- --------------
------------ -------
------ -----
---------- -------
-------- - -----
------- - -----
-
--------- -
---------- -----
------ -----
---------------- -----
-
------- -
-------- -----
------- --------
------- -----
----------- -----
-
------- ---- -
-------- ------
------ -----
------- ----
----------- -----
-------------- ----
-
---------- -
-------- -----
------ -----
---------- -------
------- - -----
-------- ---- --
-
---------- - -
-------- ------
---------------- -----
------ -----
-------- -----
-------------- --- ----- --------
-
------ ------ --- ----------- ------ -
----------- -
-------- --
-
------- -
-------- -----
-
---------- -
-------- -----
---------------- -------
------------ -------
------ -----
-------- --
------- -----
-
---------- - -
-------- -------------
-------- - -----
------- -----
------- - -----
-------------- -----
-
-
------ ------ --- ----------- ------ -
----------- -
-------- - -----
-
------- -
-------- ------
-
--------------- -
-------- ---- -----------
--------------- -------
----------- -------
-
--------------- - -
------- ---- --
-
-Javascript:
const navLinks = document.querySelector('.nav-links');
const burger = document.querySelector('.burger');
burger.addEventListener('click', () => {
navLinks.classList.toggle('nav-links-show');
});结论
使用 Flexbox 实现导航栏的折叠是一种非常高效的方法，能够帮助我们快速地解决页面布局问题，而且代码量较少，实现起来非常简单。同时，我们需要注意在 HTML 结构、CSS 样式和 Javascript 代码的编写中加强细节和规范性，遵循最佳实践，使代码更加简洁和易懂，同时也避免了一些潜在的兼容性问题。经过这些技巧和实践的积累，相信大家能够更轻松地实现各种页面布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ff7d1eedcc8a97c90bea8