Help using flexbox to make content align to the top

Hello,
The idea that I’m trying to create is hard to explain but I’ll do my best.
Essentially, what I would like to create is something with a pinboard style like pinterest.

I want the pinboard to be like this: http://output.jsbin.com/xazuxor (where the numbers are in that order and the number of columns is dynamic).
But, I want the items to align tightly to the item above it like this: output.jsbin.com/lavejac

Any ideas on how to do this? I suppose I could dynamically create the number of columns with javascript (kinda like with example 2). Is it possible to do this with just CSS instead? I feel like flex-box should be able to do this but I can’t find it.

Any help would be much appreciated!

Not sure what you mean… just in case, here’s a quick guide to Flexbox

Also, if you have a link to what you’ve already worked, it would be easier to understand where you might be getting it wrong.

Hey thanks for taking your time to respond. That’s a great link and it’s the tutorial that I stated with. On my original post I linked to two examples that I’ve created. I’m on mobile right now so it’s hard to copy them again.

Basically I want to make something like the 2nd jsbin link but where more columns will be made when the screen resizes. I think it should be possible with CSS.

you might want to use Bootstrap grid, then? That way you can decide that say 1 picture takes 4 units on a large screen, but takes all the screen on a small one?

Sorry I seem to be very fuzzy today.

I’m really trying to do this without using any frameworks or external plugins.
Also, the bootstrap grid is based on rows but I don’t want my items sorted into rows I want them to all be together.