如何在固定的 flexbox 导航栏下放置内容？

在开发网页时，常常需要在固定的导航栏下方放置一些内容。这时可以使用 Flexbox 布局来实现。

准备工作

首先，需要在 HTML 文件中创建一个导航栏的容器，并将其设置为固定定位（fixed）：

<div class="nav-container">
  <!-- 导航栏内容，如链接或按钮 -->
</div>

.nav-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px; /* 导航栏高度 */
}

接下来，需要创建一个包含内容的容器，并在其中添加一个 Flexbox 容器：

<div class="main-container">
  <div class="flex-container">
    <!-- 内容 -->
  </div>
</div>

.main-container {
  padding-top: 50px; /* 确保内容不被导航栏遮挡 */
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  /* 定义内容外观 */
}

现在，内容容器已准备好，可以在其中添加所需的元素。

布局

为了让内容容器紧贴导航栏下边缘，可以使用 margin-top 属性：

.flex-container {
  margin-top: -50px; /* 抵消导航栏的高度 */
  /* 其他样式 */
}

使用 -50px 的值是因为导航栏的高度为 50px。

如果希望内容容器与导航栏更精确地对齐，可以使用 calc() 函数：

.main-container {
  padding-top: calc(50px + 10px); /* 将填充值设置为导航栏高度加上一些间距 */
}

.flex-container {
  margin-top: calc(-50px - 10px); /* 将内容容器上边缘与导航栏下边缘对齐 */
  /* 其他样式 */
}

其中 10px 是间距的大小。

示例代码

HTML：

<div class="nav-container">
  <a href="#">首页</a>
  <a href="#">关于我们</a>
  <a href="#">联系我们</a>
</div>

<div class="main-container">
  <div class="flex-container">
    <div class="item">内容 1</div>
    <div class="item">内容 2</div>
    <div class="item">内容 3</div>
    <div class="item">内容 4</div>
    <div class="item">内容 5</div>
  </div>
</div>

CSS：

.nav-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #eee;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20px;
}

.main-container {
  padding-top: calc(50px + 10px);
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-50px - 10px);
  padding: 0 20px;
}

.item {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
}

效果如下：