FlexBox cross axis behavior



Hi there,

I’m rewriting an old plugin’s GUI with FlexBox, which is really powerful. However, I’m having trouble finding out the right way to implement the desired cross axis behavior.

Here’s an example
A column with 3 components. I want 3 of those to stretch along the cross axis, which works fine, but I also want the 3rd one to simply be centered, retaining its initial width.

FlexBox lLayout(FlexBox::Direction::column,

lLayout.items.add(FlexItem(*component1).withFlex(1.f, 0.f, 24.f));
lLayout.items.add(FlexItem(*component2).withFlex(1.f, 1.f, getHeight())); 
lLayout.items.add(FlexItem(*component3).withFlex(1.f, 0.f, 32.f).withAlignSelf(FlexItem::AlignSelf::center));


This results in component3 not being drawn at all, as the FlexBox set its width to 0 instead of retaining its initial width.
I’ve tried a bunch of other combinations of FlexBox::AlignContent, FlexBox::AlignItems and flex parameters for the item, none of which doing what I was hoping to achieve.

Browsing the FlexBox code in JUCE, I realized that the FlexItem actually never queried its attached component’s dimensions, which resulted in this 0 width.

So, my question is: what is the proper way to set cross axis dimensions for Components with FlexBox, or simply to have FlexBox not modify it when required?