How do you make the separation between elements consistent?

Question

I am trying to style my elements so that it looks something like this. (The square elements should all be same size)

But what ends up happening is this:

This is my css code for the container and elements:

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 400px;
}

.element {
    width: 80px;
    height: 80px;
    background-color: white;
}

Just remove justify-content:space between and you can add margin around the elements. — , Dec 18 '17 at 22:54

score 0 · Answer 1 · answered Dec 18 '17 at 22:47

0

Add align-content: flex-start to the .container style.

This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

More info about align-content.

answered Dec 18 '17 at 22:47

Decade Moon

32,968
8
81
101

I tried that and now there are no margins between first and second row – dylanpark Dec 18 '17 at 22:50
Then you need to add something like `margin-bottom: 10px` to the `.element` style. – Decade Moon Dec 18 '17 at 22:52

How do you make the separation between elements consistent?

1 Answers1