HTML 和 CSS 是构建网站的重要工具，通过它们实现一个漂亮和实用的导航菜单可以增强用户体验，并且给用户留下良好的印象。在本文中，我们将使用 CSS Flexbox 技术实现一个垂直导航菜单。
什么是 CSS Flexbox？
CSS Flexbox 是一个布局模块，它的目的是为了使元素的布局更加灵活和自适应。它能够轻松地创建响应式布局，帮助我们解决了因为屏幕尺寸变化带来的各种问题。它能够实现垂直和水平方向元素的排列，增加了我们的设计选择。
在这个例子中，我们将使用Flexbox在垂直方向上实现导航菜单。
首先设置 HTML 结构
在 HTML 中添加一个菜单列表，结构如下：
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>现在我们将有以下 HTML 结构
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------- ---------- ------------
----- ---------------- -----------------
-------
------
-----
----
------ ----------------------
------ -----------------------
------ --------------------------
------ -------------------------
-----
------
-------
-------接下来，添加 CSS 样式
我们在 CSS 中添加一些样式，使得菜单垂直排列。
-- -------------------- ---- ------- --- -- - -------- ----- --------------- ------- ----------- ----- ------- -- -------- -- - --- -- -- - ------- -- -------- -- - --- -- -- - - -------- ------ -------- ----- ---------------- ----- ------ ----- -
这里，我们将菜单列表（ul）设置为 Flex，同时设置了垂直排列，并去掉了列表默认的样式。最后，我们设置了一个基本的文本样式，使其更易读。
运行结果
在添加完以上 CSS 样式之后，如果我们运行 HTML 页面，将会看到如下所示的导航菜单。
总结
使用 CSS Flexbox 可以更加轻松的实现垂直导航菜单，同时让我们的整个网站布局更加灵活自适应。当然，Flexbox 还能做到其他的布局方式，这里只是介绍了很基础的一个使用方法。希望这篇文章能够帮助学习 CSS 的初学者理解 Flexbox，在设计网站时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d4ca7eb5eee0b525c9cd97