[css-flexbox] specify max items in line before wrap even if space is otherwise available

[jimmyfrasche]

I want to be able to specify something like flex-wrap-max-items: 4 and have it wrap after 4 items even if 5 or 6 would otherwise fit. This can be worked around by capping the width (resp. height) of the flex container if the size of the flex items is uniform and simple but it seems like it would be easy to specify and just let the browser work it out.

[SebastianZ]

It sounds like this use case could be solved by the wrap-before and wrap-after properties discussed in #3974 and already specified in https://www.w3.org/TR/css-text-4/#wrap-before.

In your example this would then be

:nth-child(4n) {
  wrap-after: flex;
}

Sebastian

[Loirooriol]

@SebastianZ I guess the difference would be that, if the first line can only fit 3 items, flex-wrap-max-items: 4 wont force the 4th item to be alone in the 2nd line. And would take order into account.

[jimmyfrasche]

I was not aware of wrap-after but, yes, I'd want to wrap normally until the maximum was hit not whenever the maximum is hit.

[SebastianZ]

Ah, right. Those are small but important differences. Thank you for pointing those out, @Loirooriol!

Sebastian

[gitspeaks]

I encountered a scenario where a similar setting would be helpful, but for a minimum number of items. Specifically, the goal is to start wrapping if there are at least x items that together overflow the available space. In this case, as the available space decreases, lines would overflow with x items per line.

As @SebastianZ suggested, this could potentially be solved using:

:nth-child(<An+B>) {
  wrap-before: avoid;
}

However, Section 5.3 of the CSS Text Module Level 4 states:

avoid
Line breaking is suppressed immediately before/after the box: the UA may only break there if there are no other valid break points in the line. If the text breaks, line-breaking restrictions are honored as for auto.

This means that breaking is suppressed before :nth-child(<An+B>) only if there are alternative breaking points in the line.