Is their an simple way in CSS to have a fixed maximum of child items on the same line, before you push the next child elements to a new line?
As i understand flexbox, child items only get pushed to a new line if their isint enough available space on the line above it. But i am seeking a CSS rule or function that let me say "i want a maximum of 3 child items on any given line, and even if space is available for a 4'th one push it to a new line".
Instead of using display: flex you could use float: left and clear every 3rd child node like this:
.child {
background: #000;
height: 300px;
float: left;
margin:15px 0 0 15px;
width:150px;
}
.child:nth-child(3n+1) {
clear: left;
}
I created a fiddle for you: fiddle example
In the case that the parent can hold only two children, you could use this short jQuery fix:
var child = $('.child'),
parent = $('.child').parent();
if( child.width() > (parent.width()/3) ) {
child.css('clear', 'none');
}
Fiddle with fix: fiddle example2