フレックスイメージと位置付けの問題

Question

私が達成しようとしているのは、スクリーンのサイズを小さくして、いくつかの要素が2行目に移動し始め、中央に配置するのではなく、その行の要素の）この画像は役に立ちます

これは私の実際のコードですが、間違っていますか？

#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

あなたのコードに基づいて正当化し、コンテンツを交換してください：スペースの間の中心のために、