My challenge is to maintain the left alignment of elements in a container that can increase or decrease in width. If the container size increases, the first element from the next row should move back one row and align on the right side if there is enough space with padding on both sides.
If there isn't enough space for the next row's element to move up, then the spacing between the elements should expand until it fits properly.
This functionality should also work in reverse.
Below is the code I'm currently using:
.container {
min-height: 400px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-items: center;
align-content: flex-start;
}
.container:after {
display: block;
content: " invisible node ";
flex(999 999 auto);
}
.item {
flex: 0 0 auto;
margin: 5px;
width: 50px;
height: 50px;
background-color: green;
}<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>https://jsfiddle.net/p6k537ep/
The issue I am facing is that the second row doesn't have consistent spacing between the elements as the first row (depending on how many elements are present).
Edit:
Although the elements from the second row only move up one row if there is sufficient space, the gap between them grows correctly in the first row but not in the second row.