Johannes Botéus Johannes Botéus - 1 month ago 7
CSS Question

How can my css div with the display flex property be alignd to the right when it's wrapping?

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

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>

Comments