Jim Vercoelen Jim Vercoelen - 9 months ago 91
CSS Question

Flexbox responsive layout alignment

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:


enter image description here

Tablet (here you'll see the problem in alignment (I should be right underneath the top left one...))

enter image description here


enter image description here

Code (simplified)

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></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;

Answer Source

try justify-content: space-between; instead of space-around for .container