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

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

Answer 2

You can try to add a width with percentages to the elements inside the container, along with the property flex-wrap: wrap. Then, with a media query, you manipulate the width of said elements given a breaking point. Here is an example:
.container {
display: flex;
flex-wrap: wrap;
}
.element {
width: calc(25% - 20px);
height: 100px;
margin: 10px;
background-color: red;
}
#media(max-width: 800px) {
.element {
width: calc(50% - 20px);
}
}
<div class="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>

Answer 3

As # BoltClock suggested you can "resize your flex container to accommodate the number of items on each line and let them wrap organically".
If you want to actually clear a line similar to using floats you can set a margin in the direction you want to clear.
element{
margin-right: calc( 100% - widthOfelement);
}
*{
box-sizing: border-box;
}
.parent{
display: flex;
width: 600px;
height: auto;
flex-wrap: wrap;
border: 1px grey dashed;
}
.child{
width: 100px;
height: 50px;
border: 1px orangered solid;
background-color: skyblue;
}
/*add "clear" after first child*/
.child:nth-child(1){
margin-right: calc(100% - 100px);
}
/*add "clear" after third child*/
.child:nth-child(3){
margin-right: calc(100% - 200px);
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>