随着移动设备的普及和使用，响应式设计已经成为了一种非常重要的设计方式。而在实现响应式设计的过程中，导航栏的响应式适配也是非常关键的一环。本文将介绍使用 CSS Flexbox 实现响应式导航栏的方法，并提供代码供读者参考。
什么是 Flexbox
Flexbox 是 CSS3 中一种用于设计灵活的布局模型的方式。Flexbox 布局是一种基于弹性盒子模型的布局方式，它可以解决很多复杂的布局需求，尤其适合用于响应式设计。
通过使用 Flexbox，我们可以更加方便地对页面的布局进行控制，并且能够实现更加灵活的布局效果。下面，我们来看一下如何使用 Flexbox 实现响应式导航栏。
实现响应式导航栏的步骤
第一步：HTML 结构
-- -------------------- ---- -------
---- ------------
---- -----------------------
---- ------------------------------
--- -------------
------ ----------------------
------ --------------------------
------ --------------------------
------ -----------------------
------ -------------------------
-----
------在这个 HTML 结构中，我们使用了一个 nav 容器，里面包含了一个 logo 元素，一个 menu-toggle 元素和一个 menu 列表元素。在没有进行布局之前，所有的元素都会默认排成一排。
第二步：CSS 样式
-- -------------------- ---- ------- ---- - -------- ----- ---------- ----- ---------------- -------------- ------------ ------- ----------------- ----- ------ ----- ---------- ------- -------- ----- - ----- - ---------- ------- ------------ ----- - ------------ - -------- ----- -- -------- -- ------- -------- - ----- - -------- ----- ---------- ----- ---------------- --------- ----------- ----- ------- -- -------- -- - ----- -- - ------- - ----- - ----- - - ------ ----- ---------------- ----- -
在这个 CSS 样式中，我们为 nav 容器设置了一些基本的样式，包括使用 Flexbox 布局，并设置了一些排布细节。 logo 和 menu-toggle 容器也被设置了一些样式（比如 display: none;）以便在后续进行响应式适配时使用。
第三步：响应式适配
响应式适配是通过 CSS @media 查询和 JavaScript 开发来实现的。本文只介绍基于 CSS Flexbox 的实现方式，关于 JavaScript 方式的实现可自行参考其他文章。
1. 将导航菜单折叠起来
-- -------------------- ---- -------
------ ----------- ------ -
----- -
-------- ----- -- ------ ----- ----- --
-
------------ -
-------- ------ -- ------ ----- ------- --
-
------------------ -
----------------- -----
------ -----
-
-在这段代码中，我们使用了 @media 媒体查询来检测视口宽度是否小于 768px，如果小于则将菜单隐藏，并将菜单按钮显示出来。同时还增加了一些样式以方便用户操作。
2. 调整导航菜单的排布
-- -------------------- ---- -------
------ ----------- ------ -
----- -
-------- -----
---------------- -------
-
------------ -
-------- -----
-
-在这段代码中，我们使用了 @media 媒体查询来检测视口宽度是否大于等于 768px，如果是则将菜单显示出来，并将其从 ’flex-end’ 改为 ‘center’ 排布。
效果演示
一个简单的基于 CSS Flexbox 的响应式导航栏就实现了，你可以通过以下代码查看效果。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- --------------
------ ----------------
---- -
-------- -----
---------- -----
---------------- --------------
------------ -------
----------------- -----
------ -----
---------- -------
-------- -----
-
----- -
---------- -------
------------ -----
-
------------ -
-------- -----
------- --------
-
----- -
-------- -----
---------- -----
---------------- ---------
----------- -----
------- --
-------- --
-
----- -- -
------- - -----
-
----- - -
------ -----
---------------- -----
-
------ ----------- ------ -
----- -
-------- -----
-
------------ -
-------- ------
-
------------------ -
----------------- -----
------ -----
-
-
------ ----------- ------ -
----- -
-------- -----
---------------- -------
-
------------ -
-------- -----
-
-
--------
-------
------
---- ------------
---- -----------------------
---- ------------------------------
--- -------------
------ ----------------------
------ --------------------------
------ --------------------------
------ -----------------------
------ -------------------------
-----
------
-------
-------总结
本文通过一个简单的样例介绍了如何使用 CSS Flexbox 实现响应式导航栏。在实现响应式设计时，选择合适的布局方式是非常关键的一步，而 Flexbox 布局正是十分适合用于实现响应式设计的一种方式，它能够帮助我们轻松地实现灵活的布局效果。希望读者在实践中能够掌握本文所介绍的方法，实现自己的响应式设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e8cf595b1f8cacd63c6dc