FlexBox with equal length rows?

General JUCE discussion
1

How do I make a FlexBox have equal length rows when it wraps?

For example, I have 8 items in my FlexBox. When it gets too narrow, I want two rows of 4, now a row of 7 and a row 1.

Any ideas?

2

The easiest way that I can see is to use nested FlexBox objects. Here’s an example PIP. Notice that we have to adjust the minimum width as the component gets smaller so that the wrapping happens in the correct order.

FlexBoxWrapHalf.h (4.6 KB)

This is just an example, there’s probably a more generic way to do it without a fixed number of items.

1 Like