Flex-box：未按预期对齐项目

Question

我一直在创建一个站点，并注意到 flex-box justify-content 属性无效。这被设置为居中，但 flexbox 项目似乎在容器水平轴的开始处对齐。不太清楚为什么会这样。我已经列出了我使用的 css 和 HTML。任何建议都会非常有帮助！

/*General settings*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,300&display=swap');
* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
}


/*nav settings*/

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0077c2;
  width: 100%;
  padding: 2vw 0;
  flex-wrap: nowrap;
}

.nav-container ul {
  list-style: none;
  margin-right: 10vw;
}

.nav-container li {
  list-style: none;
  display: inline-block;
  margin-right: 1vw;
}

.logo {
  margin-left: 2vw;
  color: #fff;
}

.logo :hover {
  border: 3px #ff8000 solid;
  border-radius: 5px;
}

.nav-link {
  text-decoration: none;
  color: #fff;
}

.nav-link:hover {
  text-decoration: 3px underline #ff8000;
}


/*img section*/

.img-container {
  display: flex;
  justify-content: center;
  margin-top: 5vw;
  border: 2px #ff8000 solid;
  width: 80%;
  margin: 5vh auto;
  flex-direction: row;
}

.img-container img {
  width: 40%;
  margin: 0 auto;
}

.img-container p {
  font-size: 0.9rem;
}

<header>
  <div class="nav-container">

    <div class="logo">
      <h1>Development<br>One</h1>
    </div>

    <div>
      <ul>
        <li><a class="nav-link" href="#">Home</a></li>
        <li><a class="nav-link" href="#">Apple Development</a></li>
        <li><a class="nav-link" href="#">Android development</a></li>
        <li><a class="nav-link" href="#">About</a></li>
        <li><a class="nav-link" href="#">Contact us</a></li>
      </ul>
    </div>

  </div>
</header>

<section class="img-container">

  <div>
    <h2>Section One Title</h2>
    <img src="img/androiddevelopers.png" alt="app-development">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
  </div>
  
  <div>
    <h2>Section two Title</h2>
    <img src="img/androiddevelopers.png" alt="app-development">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
  </div>
  
  <div>
    <h2>Section three Title</h2>
    <img src="img/androiddevelopers.png" alt="app-development">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
  </div>
  
</section>

Answer 1

justify-content: center 为.nav-container 工作。你只是没有认出，因为三个divs 填满了整个空间。

工作示例：（宽度更小用于演示）

/*General settings*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,300&display=swap');
* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
}


/*nav settings*/

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0077c2;
  width: 100%;
  padding: 2vw 0;
  flex-wrap: nowrap;
}

.nav-container ul {
  list-style: none;
  margin-right: 10vw;
}

.nav-container li {
  list-style: none;
  display: inline-block;
  margin-right: 1vw;
}

.logo {
  margin-left: 2vw;
  color: #fff;
}

.logo :hover {
  border: 3px #ff8000 solid;
  border-radius: 5px;
}

.nav-link {
  text-decoration: none;
  color: #fff;
}

.nav-link:hover {
  text-decoration: 3px underline #ff8000;
}


/*img section*/

.img-container {
  display: flex;
  justify-content: center;
  margin-top: 5vw;
  border: 2px #ff8000 solid;
  width: 80%;
  margin: 5vh auto;
  flex-direction: row;
}

.img-container div {
  width: 20%;
}

.img-container img {
  width: 40%;
  margin: 0 auto;
}

.img-container p {
  font-size: 0.9rem;
}

<header>
  <div class="nav-container">

    <div class="logo">
      <h1>Development<br>One</h1>
    </div>

    <div>
      <ul>
        <li><a class="nav-link" href="#">Home</a></li>
        <li><a class="nav-link" href="#">Apple Development</a></li>
        <li><a class="nav-link" href="#">Android development</a></li>
        <li><a class="nav-link" href="#">About</a></li>
        <li><a class="nav-link" href="#">Contact us</a></li>
      </ul>
    </div>

  </div>
</header>

<section class="img-container">

  <div>
    <h2>Section One Title</h2>
    <img src="img/androiddevelopers.png" alt="app-development">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
  </div>
  
  <div>
    <h2>Section two Title</h2>
    <img src="img/androiddevelopers.png" alt="app-development">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
  </div>
  
  <div>
    <h2>Section three Title</h2>
    <img src="img/androiddevelopers.png" alt="app-development">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
  </div>
  
</section>