Flex wrap line spacing

Hello, I finished flex tutorial here, on FCC, but I missed one thing: If using flex-wrap: wrap, how to specify spacing between the lines? I want second line of items to come just under the first one, not in 50% of height.
Here is the fiddle forked from tutorial: https://jsfiddle.net/8rc4qgta/

I’d like green and black be just under the blue and red.

Thanks for help!

Remove the height property from box container.

If you want a grey background to contain your colored boxes make a new parent container and put everything in that and set the background and height property there.

Edit: Just in case you haven’t come across this page yet. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I rolled back through all the flex tutorial article and I found my solution:
It is to set align-content: flex-start; for the elements wrapper.

1 Like