包装时，具有display flex属性的css div如何对齐到右侧？

Question

I am trying to make a sort of gallery where all my user uploaded pictures get alignd in a div which holds one more divs which holds the picture. It will be more clear in the code ;) But the last item (the child div) aligns in the middle but I want the last one to align to the left but I have tried now in hours to get this flex stuff to work and watched several tutorials on how the flex property behaves but no success :/

Here the 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

Just remove the justify-content style. Elements that won't fit on the first row, will break to the second, starting on the left side. To make the code more fancy i've added some margin to the child boxes.

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>