FlexBox changes in 6.1.4 - possible bug


One of our UI elements isn’t displaying as expected following the layout bug fixes to Flexbox and changes to FlexItem. Here’s some simple code, which if it is run using JUCE 6.1.3 or 6.1.4 will display differently:

void MainComponent::resized()

    auto makeItem = [] (auto& c)
        return juce::FlexItem (c)
        .withHeight (100)
        .withWidth (100);
    juce::FlexBox flexBox { juce::FlexBox::JustifyContent::spaceBetween };
    flexBox.flexDirection = juce::FlexBox::Direction::column;
    flexBox.alignContent = juce::FlexBox::AlignContent::center;
    flexBox.items = { makeItem (slider1), makeItem (slider2) };
    flexBox.performLayout (getLocalBounds());

As you can see the rotary sliders display differently.

As workaround for the moment, adding the following line re-arranges things for me in 6.1.4

flexBox.alignItems = juce::FlexBox::AlignItems::center;

It looks like a bug to me. Or is this in line with what these FlexBox/FlexItem changes are trying to achieve?

See the breaking changes file:

The previous default for flex-items’ alignment was wrong, so any layouts that relied on that default behaviour will have been affected.

The suggested fix in the breaking changes file is to set all flex-items’ alignment back to stretch but the solution you’ve provided to just set the single property on the parent is obviously much simpler in this case.

Ok. Makes sense thanks. I’m surprised we haven’t more UI bits look wonky at our end due to the change!