Как мой css div с атрибутом display flex будет выравниваться вправо, когда он будет обертываться?

Question

Я пытаюсь сделать своего рода галерею, где все мои загруженные пользователем изображения получают alignd в div, который содержит еще один divs, который содержит изображение. Это будет более понятным в коде;) Но последний элемент (дочерний div) выравнивается посередине, но я хочу, чтобы последний был выровнен слева, но я пробовал теперь через несколько часов, чтобы заставить этот материал гибки работать и наблюдать несколько руководств о том, как гибкое свойство ведет себя, но не успех:/

Здесь JSFiddle:

https://jsfiddle.net/kra1b6LL/3/

#sWrapper{ 
    position:absolute; 
    top:10vh; 
    height:75vh; /* Android Size */ 
    height:65vh; /* iPhone Size */ 
    width:100%; 
    right:0px; 
    left:0px; 
} 
#sWrapperContent{ 
    background-color:blue; 
    position:absolute; 
    height:100%; 
    width:100%; 
    overflow: auto; 
    display:flex; 
    flex-wrap:wrap; 
    justify-content: space-around; 
} 
#sStyleBox{ 
    border:1px solid white; 
    box-sizing: border-box; 
    height:23vh; 
    width:18vh; 
    display:inline-block; 
} 

Answer 1

Просто удалите стиль оправдает-контент. Элементы, которые не будут вписываться в первую строку, будут разбиты на второй, начиная с левой стороны. Чтобы сделать код более привлекательным, я добавил некоторый запас для дочерних ящиков.

https://jsfiddle.net/hyv4h4fy/

#sWrapper{ 
 
    position:absolute; 
 
    top:10vh; 
 
    height:75vh; /* Android Size */ 
 
    height:65vh; /* iPhone Size */ 
 
    width:100%; 
 
    right:0px; 
 
    left:0px; 
 
} 
 
#sWrapperContent{ 
 
    background-color:blue; 
 
    position:absolute; 
 
    height:100%; 
 
    width:100%; 
 
    overflow: auto; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    
 
} 
 

 
#sStyleBox{ 
 
    margin:5px; 
 
    border:1px solid white; 
 
    box-sizing: border-box; 
 
    height:23vh; 
 
    width:18vh; 
 
    display:inline-block; 
 
}

<div id="sWrapper"> 
 
     <div id="sWrapperBeforeContent"> 
 
      <div id="sWrapperContent"> 
 

 

 
      <div id="sStyleBox"> 
 
       <div id="sStyleImg"></div> 
 
      </div> 
 
      <div id="sStyleBox"> 
 
       <div id="sStyleImg"></div> 
 
      </div> 
 
      <div id="sStyleBox"> 
 
       <div id="sStyleImg"></div> 
 
      </div> 
 
      <div id="sStyleBox"> 
 
       <div id="sStyleImg"></div> 
 
      </div> 
 
      <div id="sStyleBox"> 
 
       <div id="sStyleImg"></div> 
 
      </div> 
 
      <div id="sStyleBox"> 
 
       <div id="sStyleImg"></div> 
 
      </div> 
 
      <div id="sStyleBox"> 
 
       <div id="sStyleImg"></div> 
 
      </div> 
 
      <div id="sStyleBox"> 
 
       <div id="sStyleImg"></div> 
 
      </div> 
 
      <div id="sStyleBox"> 
 
       <div id="sStyleImg"></div> 
 
      </div> 
 
      <div id="sStyleBox"> 
 
       <div id="sStyleImg"></div> 
 
      </div> 
 

 

 
      </div> 
 
     </div> 
 
    </div>