Jim Vercoelen Jim Vercoelen - 23 days ago 18
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:

Desktop

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

Phone

enter image description here

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;
}
}

Answer

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

Comments