弹性图像和定位问题

Question

What I'm trying to achieve, once I reduce the size of the screen and some elements starts to move to a second line, keep them organized to the left, instead of centered (based on the number of elements on that row). This image might help

And this is my actual code, what I'm doing wrong?

 #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：居中空间；