Flex Align-items：居中；不允许我使用 Justify-content: flex-end;在同一个街区

Question

我试图让导航栏 ul 和 li's 走到尽头（右），我将把它们推开 150 像素，并留出边距以使其居中。它有效，但后来我想使用 Flex Align-items 将徽标和导航栏的 ul 和 li 居中：center;但随后证明 - flexend 不起作用。看不出来为什么，我通常不使用 flex，虽然我应该猜。

另外我不能使用<header>、<b> 之类的东西，所以我在使用 flex 时必须围绕它创建一个 div，这正常吗？

这是错误的 HTML。

    <div class="header">
    <img src="img/logo.png" alt="" class = "logo" />
    <ul class = "nav">
      <li><a href="index.html" class = "active">PROJECTS</a></li>
      <li><a href="testimonials.html">TESTIMONIALS</a></li>
      <li><a href="#">OUR PROCESS</a></li>
      <li><a href="#">ABOUT US</a></li>
      <li><a href="#">CONTACT US</a></li>
    </ul>
</div>

这是错误的 CSS。

.header{
display: flex;
align-items: center; /* Here's the align items im talking about*/
background-color: #d40050;
height: 112px;
width: 100%;
}
.logo{
display: inline-block;
margin-left: 150px;
width: 11rem;
}
.nav{     /*Think this is what's bugging*/
 display: flex;
 justify-content: flex-end; /*This is the flex end I'm talking about*/
 margin-left: 35%;
}
.nav li{
 display: inline-block;
 position: relative;
 color: white;
 margin-left: 30px;
 font-family: 'Lato';
 font-size: 15px;
 font-weight: bold;
}
.nav li a.active{
 border-radius: 3px;
 background-color: #aa0040;
 padding: 3px 12px 3px 12px;
}
.nav li a.active:after{
 content: ' ';
 width: 0px;
 height: 0px;
 border-top: 10px solid #aa0040;
 border-left: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-right: 10px solid transparent;
 position:absolute;
 left: 50%;
 top: 100%;
 margin-left: -10px;
}

P.S - 这是网站的直播：tsuts.tskoli.is/2t/2809984199/skapalon/

Answer 1

在弹性容器上使用justify-content 属性。

.header{
    display: flex;
    align-items: center;
    justify-content: space-around; /*Add this line of code*/
    background-color: #d40050;
    height: 112px;
    /*Remove this
    width: 100%;
    */
}
.logo{
    display: inline-block;
    /*
    Remove this:
    margin-left: 150px;
    */
    width: 11rem;
}

/*
Remove this:
    .nav{
     display: flex;
     justify-content: flex-end;
     margin-left: 35%;
}
*/