Struggling with achieving a responsive layout using Flexbox.
Picture a page filled with panels. The main objective is to display a certain number of panels per row, aligned both horizontally and vertically like the rest.
The main issue I am encountering is getting the alignment right when a panel moves to the next row. Attempting to align a panel directly below the one above it, but this has proven challenging.
Here are my current outcomes:
Desktop
Tablet (the alignment issue can be seen here)
Phone
Code (simplified)
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
-
.container {
display: flex;
flex-flow: row wrap;
max-width: 960px;
justify-content: space-around;
.item {
margin-top: 24px;
width: 264px;
height: 183px;
background: red;
}
}