Flexbox stack height

Asked Mar 06 '18 at 10:08

Active Mar 06 '18 at 12:08

Viewed 23 times

I want to stack flexbox items and not have the same heights, Almost similiar to pinterest layout so the posts don't have any spacing between, If it's possible without Masonry it would be the best.

So far i have this

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 100%;
    align-items: flex-start;
}

.flex-content {
    margin: 15px;
    width: 300px;
    background-color: white;
}

They do still stack as the image below, Is it possible in any smart way?

Thanks!

edited Mar 06 '18 at 12:08

asked Mar 06 '18 at 10:08

Kerpalito

You want to stack vertically instead of horizontally. Have a look at [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction). – Ruud Mar 06 '18 at 10:38
Can you consider a solution with css grid? – Gibin Ealias Mar 06 '18 at 12:01

Flexbox stack height

0 Answers0