How do i organize flex items properly? - html

Question

The issue I am facing is not that big of a problem but it could potentially ruin the look of my page. The problem is I have a div card that is a flex object i.e it's parent div has its display set to flex
.season-list{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
flex-direction: row;
}
<div class="season-list container">
<div class="card">
<img class="image" src="some.jpg" alt="">
<div class="overlay">
<div class="text">
<small>Some text</small><br>
<small>something else</small>
<br>
<small class="tempt">something;</small>
</div>
</div>
</div>
</div>
Now what happens is that setting justify-content as space-evenly does organize the card object properly i.e three in a row, however, when i have lets say 7 cards, it organizes the first three normally but ends up aligning the last card in the bottom-centre of the previous row. I have tried messing around with different justify-content values but to no avail. Like i said this is not a big problem but could make the page look a little less pleasing to the eye.

Answer 1

You could switch to the grid display to avoid this :
example with a card of 250px (update this value to your needs)
.season-list {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
justify-content: space-evenly;
gap: 1em;
}
<div class="season-list container">
<div class="card ">
<img class="image " src="https://picsum.photos/id/1011/200/100" alt="">
<div class="overlay">
<div class="text">
<small>Some text</small><br>
<small>something else</small>
<br>
<small class="tempt">something;</small>
</div>
</div>
</div>
<div class="card ">
<img class="image " src="https://picsum.photos/id/1011/200/100" alt="">
<div class="overlay">
<div class="text">
<small>Some text</small><br>
<small>something else</small>
<br>
<small class="tempt">something;</small>
</div>
</div>
</div>
<div class="card ">
<img class="image " src="https://picsum.photos/id/1011/200/100" alt="">
<div class="overlay">
<div class="text">
<small>Some text</small><br>
<small>something else</small>
<br>
<small class="tempt">something;</small>
</div>
</div>
</div>
</div>
Play in full screen to check its behavior or play with the codepen : https://codepen.io/gc-nomade/pen/BapgbYx (added a few examples borders to the card and grid-auto-rows to set each rows the same height.)

Answer 2

enter image description here
I think this is exactly what you're looking for
.season-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
}
.card {
background-color: rgb(247, 56, 56);
color: rgb(255, 255, 255);
width: 10rem;
height: 10rem;
margin: 3rem;
display: flex;
justify-content: center;
align-items: center;
}