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?

Sorry to bump an old thread, but I’m having this issue as well. FlexItems just disappear if you give them certain properties. I’m not exactly certain how the flexbox implementation should work in this regard since I’m not a web dev guy, but it seems like there’s some un-intuitive interactions between margins and item alignment. I’ve resorted to just wrapping flex item contents in another container that handles the alignment, but it’s pretty clunky.

From my understanding, the FlexBox should use the item’s size when performing certain layout tasks, but it’s not clear exactly how this works. From my current impressions, it seems like the FlexBox just divides the main axis area evenly according to the flex values and margins, and ignores the items’ initial/preferred sizes.