前言
在前端开发中，导航栏的布局是一个非常基础的技术。虽然很多开发者可能通过传统的 float 和 position 等技术来实现导航栏的布局，但这些技术在处理多样化的布局时会变得非常不便。在这种情况下，CSS Flexbox 技术作为一个新型技术获得了广泛关注和使用。
相关概念
在介绍 CSS Flexbox 布局技巧之前，需要了解一些相关概念：
- Flexbox 容器：设置了 display: flex 或 display: inline-flex 属性的 DOM 元素称为 Flexbox 容器。
- Flexbox 项目：Flexbox 容器内的待布局元素称为 Flexbox 项目。
- 主轴（main axis）：Flexbox 容器的主方向称为主轴。
- 交叉轴（cross axis）：顾名思义，与主轴垂直方向的轴称为交叉轴。
如下图所示：
实现导航栏布局
下面，我们将介绍使用 CSS Flexbox 技术来实现导航栏布局的技巧。具体地，我们设定导航栏有固定高度，菜单项水平分布，并有选中高亮效果。同时该导航栏需要是响应式的，在小屏幕上可以折叠成一个汉堡菜单并垂直排列。
HTML 结构
我们首先考虑 HTML 结构。在这里，我们需要提供一个固定高度的导航栏，其中应包含两个主要的部件：左侧的品牌 logo 和右侧的菜单项。对于选中的菜单项，我们可以使用 CSS 来实现高亮效果。
HTML 结构可以如下所示：
-- -------------------- ---- -------
---- ---------------
---- ----------------------
-- ------------------
------
---- ---------------------
-- -------- -------------------------------------
-- ------------------
-- -----------------
-- --------------------
------
------- -----------------------
----- ---------------------------
----- ---------------------------
----- ---------------------------
---------
------CSS 样式
接下来，我们可以使用 CSS 样式来进行导航栏的布局设置。具体地，我们可以将 .navbar 显示为 flex 容器，并设定主轴方向为水平方向（即由左到右排列）。我们还可以设定 .navbar__brand 和 .navbar__menu 水平分布于主轴，并使用 justify-content 和 align-items 来调整它们的水平和垂直对齐方式。通过这种方式，可以让品牌 logo 在左侧，菜单项在右侧，并且它们之间有一定的空隙。
-- -------------------- ---- ------- ------- - -------- ----- ------- ----- ----------------- ----- ------ ----- ---------- ----- ---------------- -------------- ------------ ------- -------- - ----- - -------------- - -------- ----- ------------ ------- - ------------- - -------- ----- - ------------- - - ------ ----- ---------------- ----- -------- - ----- ----------- --- ----- - ------------- ------- - ------ ----- ----------------- ----- - --------------------- - ------------ ----- -
此外，我们还可以使用@media媒体查询来为小屏幕设备设置导航栏的响应式布局。在这种情况下，我们需要让 .navbar__menu 垂直排列，并添加一个汉堡菜单切换按钮。
-- -------------------- ---- -------
------ ----------- ------ -
------- -
--------------- -------
-
-------------- -
-------------- -----
-
------------- -
-------- -----
--------------- -------
------------ -------
-
--------------- -
-------- ------
----------- -----
------- -----
------- --------
-
------------ -
-------- ------
------ -----
------- ----
------- --- --
----------------- -----
----------- --- -----
-
----------------------- ------------------------- -
---------- ------------- -------------- -----
-
----------------------- ------------------------- -
-------- --
-
----------------------- ------------------------- -
---------- -------------- -------------- ------
-
----------------------- ------------ -
----------------- -----
-
----------------------- - ------------- -
-------- ------
-
-可以看到，我们使用 display: none 将 .navbar__menu 隐藏，并使用 flex-direction: column 让它垂直排列。我们还为 .navbar__toggle 添加了一个点击事件，用来切换汉堡菜单图标的状态。当 .navbar__toggle 的 active 类被激活时，我们使用 transform 和 opacity 等 CSS 属性来实现汉堡菜单的动态效果。
最终导航栏效果可以如下所示：
总结
本文介绍了使用 CSS Flexbox 技术实现导航栏布局的技巧。相比传统的 float 和 position 等技术，Flexbox 技术更加灵活和方便，并且可以让开发者更加高效地实现多样化的布局效果。希望读者可以通过本文学习到这种技术，并在实际开发中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64523ab6675af4061b5da0e6