FlexBox behaviour since 6.1.3

General JUCE discussion
1

Hi!

After updating juce to 6.1.3 I noticed the FlexBox behaviour changed.

Either I am using Flexbox incorrectly (and it accidentally worked before) or the new FlexBox behaviour is wrong.

Here is a simple juce project that should show a button and label (worked in juce 6.1.2). In 6.1.3 nothing shows up:

class MainComponent  : public juce::Component
{
public:
    MainComponent()
    {
        setSize (600, 400);
        
        addAndMakeVisible(button);
        addAndMakeVisible(label);
    }

    ~MainComponent() override
    {
    }

    //==============================================================================
    void paint (juce::Graphics& g) override
    {
        // (Our component is opaque, so we must completely fill the background with a solid colour)
        g.fillAll (getLookAndFeel().findColour (juce::ResizableWindow::backgroundColourId));
    }

    void resized() override
    {
        juce::FlexBox box;
        
        box.flexDirection = juce::FlexBox::Direction::column;
        box.alignContent = juce::FlexBox::AlignContent::stretch;
        box.alignItems = juce::FlexBox::AlignItems::center;
        
        box.items.add(juce::FlexItem(button)
                                   .withHeight(25)
                                   .withFlex(0.5));
        box.items.add(juce::FlexItem(label)
                                   .withFlex(10));
        
        box.performLayout(getLocalBounds());
    }


private:
    //==============================================================================
    // Your private member variables go here...

    juce::TextButton button {"Button"};
    juce::Label label {"", "Label"};

    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)
};
2

I think you’re seeing the effects of this change:

Previously, FlexItems had a default ‘alignSelf’ value of ‘stretch’, and would therefore ignore the ‘alignItems’ setting of the FlexBox.

In your example, the button and label would have stretched to fill the width of the FlexBox. Now, the FlexItems respect the alignItems setting of the FlexBox and centre themselves inside the FlexBox instead. Because neither FlexItem has an explicit width, both items are given a width of ‘0’.

The simplest way to restore the desired behaviour is to use an alignItems of stretch instead of center.

This snippet is a simplified port of your example into CSS. It shows that JUCE’s new behaviour is the same as the CSS behaviour:

https://jsfiddle.net/xqybas2c/

2 Likes