Flex图像和定位问题

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

您的代码尝试更换您的辩解内容：对中心之间的空间;