Having some troubles getting a layout correctly responsive using Flexbox.
Imagine a page only containing some panels. The goal is to show an x-amount of panels / row, aligned horizontal & vertical as the other ones.
The problem I am currently facing is the alignment when a panel switches from row. Trying to align a panel straight underneath the above one, but this is not working out at all.
My results so far:
Desktop
Tablet (here you'll see the problem in alignment (I should be right underneath the top left one...))
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;
}
}
