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.
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?