使用 flexbox 制作带有 3 个 div 的导航栏答案

【问题标题】：Using flexbox to make a navbar with 3 divs使用 flexbox 制作带有 3 个 div 的导航栏
【发布时间】：2022-01-17 06:45:34
【问题描述】：

我正在尝试使用 flexbox 布局制作一个包含三个 <div> 元素的导航栏；所需的外观将在最左侧、中间和最右侧包含内容。我就是无法让它们彼此分开。

这是我的代码：

* {
  padding: 0;
  margin: 0;
}

.navbar-wrapper {
  display: flex;
  flex-direction: row;
}

.left-navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
}

.middle-navbar ul {
  align-content: center;
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  padding: 40px;
}

.right-navbar {
  align-items: center;
  justify-content: center;
}

<nav>
  <div class="navbar-wrapper">
    <div class="left-navbar">
      <h1>Ben Resume</h1>
    </div>
    <div class="middle-navbar">
      <ul>
        <li><a href="#">Introduction</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Reviews</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="right-navbar">
      <button type="button" name="Download CV">Download CV</button>
    </div>
  </div>
</nav>

【问题讨论】：

标签： html css flexbox nav

【解决方案1】：

我也删除了不必要的代码

* {
  padding: 0;
  margin: 0;
}

.navbar-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around; /*or space-between*/
  align-items: center;
  width: 100%;
  padding: 20px 0;
}

.links {
  align-content: center;
  display: flex;
  justify-content: space-evenly;
}

.links a {
  margin-right: 10px;
}

<nav class="navbar-wrapper">
  <div class="left-navbar">
    <h1>Ben Resume</h1>
  </div>
  <div class="links">
    <a href="#">Introduction</a>
    <a href="#">About Me</a>
    <a href="#">Reviews</a>
    <a href="#">Contact</a>
  </div>
  <button type="button" name="Download CV">Download CV</button>
</nav>

【讨论】：

【解决方案2】：

将justify-content: space-between; 添加到您的.nabvar-wrapper

【讨论】：

【解决方案3】：

你必须给 .navbar-wrapper 一个宽度，例如使用 justify-content: space-between`

.navbar-wrapper{
width:100%;
display:flex;
justify-content:space-between;

`

【讨论】：

【解决方案4】：

使用flex的时候其实有两种解决方案：

使用 space-between（从父级角度）

/* QuickReset */ *, ::after, ::before { margin: 0; box-sizing: border-box; }

.navbar-wrapper {
  display: flex;
  justify-content: space-between;
}

<div class="navbar-wrapper">
  <div>ONE</div>
  <div>TWO</div>
  <div>THREE</div>
</div>

或使用 margin auto（从孩子的角度）

/* QuickReset */ *, ::after, ::before { margin: 0; box-sizing: border-box; }

.navbar-wrapper {
  display: flex;
}

.row-center {
  margin: 0 auto;
}

<div class="navbar-wrapper">
  <div>ONE</div>
  <div class="row-center">TWO</div>
  <div>THREE</div>
</div>

【讨论】：

我刚刚完成了 Angela Yu 关于 Udemy 课程的 CSS 部分，所以我仍在学习如何实际应用 CSS。您介意向我解释两种解决方案中的“QuickReset”行吗？提前致谢！
@TJCullen * 全局（通用）选择器 developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors 用于定位页面上的每个元素。在此处了解有关 CSS 重置 的更多信息：meyerweb.com/eric/tools/css/reset 现在我总是使用这个简单的方法来删除不需要的供应商用户代理样式表。例如，我不想要 body 元素的默认边距等。Regargin box-sizing 和其他 CSS、HTML、JS 属性、方法等，请始终参考令人惊叹的 MDN 文档：developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

【解决方案5】：

在你的包装 div 上使用 justify-content: space-between。

【讨论】：