柔性图像和定位问题

Question

我想要实现的目标，一旦我减小了屏幕的大小并且一些元素开始移动到第二行，将它们组织在左边，而不是居中（基于该行上的元素数量） ）。这张图片可能有帮助

这是我的实际代码，我做错了什么？

#teamBoxesWrapper {
  position: relative;
  background-color: ;
  width: 1200px;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#teamUser {
  width: 250px;
  /* 20% of the viewport width */
  height: 250px;
  background-color: ;
  margin: auto;
  cursor: pointer;
  margin-bottom: 20px;
  position: relative;
}

.teamUser4 {
  background-image: url('../images/empleado4.jpg');
  background-position: center center;
  background-size: cover;
}

<div id="teamBoxesWrapper">
  <div id="teamUser" class="teamUser4">
    <div id="teamUserPopup4" class="teamUserDetails">
      <div id="teamUserTextAligner">
        <h3 class="teamUserText1">Manuel Brenes</h3>
        <hr class="userHr" />
        <h3 class="teamUserText2">Graduado Social y
          <br>Derechos Laborales</h3>
      </div>
    </div>
  </div>
</div>

Answer 1

在你的代码上尝试替换你的justify-content：space-between for center;