I am facing a challenge with five divs that I want to display inline and make them responsive. The issue is that when the window size changes, they end up getting squished together instead of breaking into a new row as desired. I have tried various methods like using display: inline-block and display: flex in my CSS, but so far I haven't been able to achieve the desired outcome. I am not very proficient with flexbox and despite looking for solutions on Stack Overflow, nothing seems to work when I implement it in my code.
My current CSS code spreads the items evenly, but the problem arises when the browser window is resized. Instead of moving to the next row, the items just get overlapping. I am looking for a solution similar to Bootstrap columns that can help me solve this issue. Can someone please review my code and suggest how I can fix this?
.container {
display: flex;
text-align: center;
justify-content: space-between;
}
.item {
background-color: green;
border: 1px solid black;
}<div class="container">
<div class="item">content goes here, just an example</div>
<div class="item">content goes here, just an example</div>
<div class="item">content goes here, just an example</div>
<div class="item">content goes here, just an example</div>
<div class="item">content goes here, just an example</div>
</div>