html - 我的带有 display flex 属性的 css div 在换行时如何右对齐？

Question

我正在尝试制作一种画廊，其中我所有用户上传的图片都在一个 div 中对齐，该 div 包含另一个包含图片的 div。在代码中会更清楚；)但是最后一项(子 div)在中间对齐，但我希望最后一个向左对齐，但我已经在几个小时内尝试让这个 flex 东西工作并观看几个关于 flex 属性如何表现但没有成功的教程:/

这里是 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

只需删除 justify-content 样式。第一行放不下的元素将从左侧开始分到第二行。为了使代码更花哨，我在子框上添加了一些边距。

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>