CSS3 flexbox layout max 3 child items on one line

Question

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?

flex wrapper with four child items

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".

Answer 1

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

CSS3 flexbox layout max 3 child items on one line

Sign up