I want to align my element to flex items to the left which is what I have done,but when I add margin-right: auto; that leaves me empty space between items at the bottom.
example:
When I add margin manually, something like margin-right: 20px; it leaves too much space at the right in some zooms of website. example:
My code:
.box {
flex-wrap: wrap;
display: flex;
flex: 1 0 21%;
}
#item {
margin-bottom: 35px;
margin-right: auto;
float: left;
position: relative;
width: 200px;
height: 300px;
}
<div class="box">
<div id="item">
...some other stuff...
</div>
</div>
How can I do to get something like this(and it has to be responsive also i don't want to resize box class div).