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
https://i.sstatic.net/C9f6e.png
Tablet (the alignment issue can be seen here)
https://i.sstatic.net/3CvVJ.png
Phone
https://i.sstatic.net/ZLNGX.png
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;
}
}