FlexBox cross axis behavior

gui

#1

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,
FlexBox::Wrap::noWrap,
FlexBox::AlignContent::stretch,
FlexBox::AlignItems::stretch,
FlexBox::JustifyContent::spaceBetween);

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));

lLayout.performLayout(getLocalBounds());

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?