Logo

菜单

发布于 2026-01-06 14 阅读
0

使用 Flexbox 创建导航栏

使用Flexbox创建导航栏

过去，为网站创建导航栏是一项挑战，尤其是在大屏幕上使用水平导航栏时。你需要计算元素之间的间距，考虑内边距和外边距，然后祈祷以后没人会要求修改。

由于Flexbox在浏览器中广泛应用，创建导航栏所需的代码量大大减少。

在本教程中，您将构建一个导航栏，其元素在大屏幕上均匀分布，在小屏幕上垂直堆叠，并且您将使用最少的 HTML 和 CSS 来构建它。

创建 HTML

创建一个名为 `<html>` 的新 HTML 文件nav.html，并将以下 HTML 框架放入该文件中：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Navbar Example</title>
  </head>
  <body>

  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

此模板定义了文档的语言、字符编码、视口大小（以便移动设备能够适当地缩放页面）以及页面标题。

在<body>页面顶部，添加一个<nav>包含几个链接的元素：

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Support</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

此导航元素仅包含<a>标签。它不包含无序列表或其他标记，例如您可能在其他菜单示例中看到的标记。这就是定义菜单所需的所有标记，因为 Flexbox 可以处理所有对齐和样式。如果您需要开发更复杂的菜单，例如包含部分、子菜单和其他元素，则可能需要额外的结构元素，但这里不需要。

现在我们来添加样式。

菜单样式设计

菜单样式设计包括两个步骤：

  • 定义元素的放置位置
  • 定义元素的外观

首先确定菜单的显示位置。这个菜单的目标是在小屏幕上垂直显示，在大屏幕上水平显示。如果你采用“移动优先”的 CSS 策略，就能减少代码量；也就是说，先为小屏幕编写所有样式，然后再为大屏幕添加媒体查询。

在你的nav.html文件中，<style>向该<head>部分添加一个元素。

<head>
...
  <style>

  </style>
</head>
Enter fullscreen mode Exit fullscreen mode

在一个更大的项目中，您可以使用带有元素的外部样式表<link>，但对于这个示例，请将所有内容保存在一个文件中，以便您在以后处理自己的项目时可以引用它。

<style>在页面的该部分中，为nav元素添加一个新的定义，将其定义为弹性容器，确保其子元素均匀分布，并且元素垂直堆叠：

nav {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

该justify-content选项确保子元素之间间距均匀，同时flex-direction决定子元素是垂直堆叠（column）还是水平放置（row）。默认情况下，元素垂直堆叠遵循“移动优先”的设计理念。

接下来，添加一个针对更大显示屏的媒体查询，并flex-direction再次进行定义，但这次使用以下row值：

@media only screen and (min-width: 768px) {
  nav { flex-direction: row; }
}
Enter fullscreen mode Exit fullscreen mode

此媒体查询会查找宽度至少为 768 像素的屏幕。在您自己的项目中，请使用浏览器的开发者工具模拟移动设备，调整屏幕宽度，找到适合您的宽度。

弹性容器已经定义好了，下一步就是设置各个元素的样式。你在nav元素样式定义中指定的弹性容器设置只适用于直接子元素。这也是为什么这段代码没有使用项目符号列表之类的额外标记的原因之一。如果你使用了项目符号列表，就必须将列表本身也设置为弹性容器。

添加以下样式定义，使元素间距均匀：

nav a{
  flex: 1;
  text-align: center;
  margin: 0.25em;
  padding: 0.25em;
}
Enter fullscreen mode Exit fullscreen mode

flex属性定义了元素如何缩放。对所有元素都使用flex属性会使它们占据相同的大小。如果您希望其中一个元素的宽度是其他元素的两倍，则需要指定其中一个元素使用 flex 属性。flex: 1<a>flex: 2

text-align: center将文本居中放置在每个元素内。margin并padding确保每个元素内外间距均匀。

这样就确定了元素的放置位置。现在定义外观。为每个导航项添加边框，更改颜色，并移除下划线：

nav a{
  flex: 1;
  text-align: center;
  margin: 0.25em;
  padding: 0.25em;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #555;
}
Enter fullscreen mode Exit fullscreen mode

菜单已完成。您的整个文件应该如下所示：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Navbar Example</title>
    <style>
      nav {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
      }

      @media only screen and (min-width: 768px) {
        nav { flex-direction: row; }
      }

      nav a{
        flex: 1;
        text-align: center;
        margin: 0.25em;
        padding: 0.25em;
        border: 1px solid #ddd;
        text-decoration: none;
        color: #555;
      }

    </style>
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Products</a>
      <a href="#">Support</a>
    </nav>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

确认无误后保存文件。在浏览器中打开该文件，您将看到水平导航栏：

水平导航栏

水平导航栏

将浏览器窗口缩小到 768 像素以下，即可看到垂直菜单：

水平导航栏

水平导航栏

结论

在本教程中，您探索了 CSS 的 Flexbox 特性。Flexbox 可以让您用比以往更少的代码构建导航元素，还可以将其用于图像库、用户界面窗格或其他需要水平或垂直对齐的元素。您甚至可以将其用于整个布局。探索 Flexbox，看看如何将其应用到您的下一个项目中。

喜欢这篇文章吗？购买我的软件开发书籍来支持我的写作吧！

文章来源：https://dev.to/bphogan/creating-a-navigation-bar-with-flexbox-a2n
JVM 是 debaixo dos...
使用 Golang 和 Mongo...