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

Question

我正在尝试使用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>

Answer 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>

Answer 2

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

Answer 3

您必须给.navbar包装器一个宽度，并使用justify content:例如`之间的空格

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

`

Answer 4

使用flex时实际上有两种解决方案：

使用之间的空间(从父级角度(

/* 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>