How to break row ("clear" element) in css flexbox

Question

Is it possible to "clear" element in a "display: flex" container?

I want to achieve something like this:

• 20 elements in a row on a big screen
• 10 elements in a row on a smaller screen
• 5 elements in a row on a small screen

With floats, I could "clear" after each 5th element with proper media queries...

Answer 1

You can add flex-wrap: wrap; to the container and set the width of the elements inside.

Then you should have the control to decide on which elements the floating will stop.

Demo: http://codepen.io/imohkay/pen/gpard