Control the number of items on each flex-line when container is set to wrap

Question

I am using css flexbox to distribute a number of items in a container. I have a flex container like this:

.container{
    display: flex;
    flex-flow: row wrap;         


        

Answer 1

What you're looking for is sometimes referred to as Quantity Queries.

If media queries allow for breakpoints based on viewport dimensions, quantity queries allow for breakpoints based on content quantity (e.g., sibling count).

It's not part of any official standard but I wouldn't call it a hack. The code can be quite elegant. It is a bit involved, however. Here you go:

• Quantity Queries for CSS
• Styling elements based on sibling count
• How to specify an element after which to wrap in css flexbox?

Answer 2

Do you mean flex-basis?

.container .item {
    flex-basis: 25%;
}

It will divide to maximum 4 item per row.