FlexBox missing space-evenly justification/alignment

General JUCE discussion
1

Maybe this is intentional, but FlexBox’s don’t have a spaceEvenly Justification or Alignment type.

Space-evenly spaces items with equal space between them and around them. This image from css-tricks is a good example:

https://cdn.css-tricks.com/wp-content/uploads/2013/04/justify-content-2.svg

2 Likes
2

bump @jules etc

see: https://yoksel.github.io/flex-cheatsheet/#justify-content

for a way to play around with it.

1 Like
3

Bump again

4

bumpity bump bump!!!

1 Like
6

Yet another bump, we’ve come across this one yet again!

The workaround on this is so painful it almost makes it pointless to use a flex layout altogether!

juce::FlexBox flex;
flex.justifyContent = juce::FlexBox::JustifyContent::spaceBetween;

static constexpr auto widgetWidth = 100;
const auto spacing = getWidth() - widgetWidth * widgets.size();

flex.items = {
    juce::FlexItem{}
        .withWidth (spacing),
    juce::FlexItem {widgets[0]}
        .withWidth (widgetWidth),
    juce::FlexItem{}
        .withWidth (spacing),
    juce::FlexItem {widgets[1]}
        .withWidth (widgetWidth),
    juce::FlexItem{}
        .withWidth (spacing),
    juce::FlexItem {widgets[2]}
        .withWidth (widgetWidth),
    juce::FlexItem{}
        .withWidth (spacing),
};

flex.performLayout (getLocalBounds());
7

I’ve avoided FlexBox in the past for this very reason. Well done for finding that workaround!

1 Like
8

Tbf I just realised there’s a much simpler workaround…

juce::FlexBox flex;

flex.items = {
    juce::FlexItem{}
        .withFlex(1.0f),
    juce::FlexItem {widgets[0]}
        .withWidth (widgetWidth),
    juce::FlexItem{}
        .withFlex(1.0f),
    juce::FlexItem {widgets[1]}
        .withWidth (widgetWidth),
    juce::FlexItem{}
        .withFlex(1.0f),
    juce::FlexItem {widgets[2]}
        .withWidth (widgetWidth),
    juce::FlexItem{}
        .withFlex(1.0f),
};

flex.performLayout (getLocalBounds());

Although that relies on not having any other items using flex-grow.

9

In the FlexBox.cpp I added following after the spaceAround if statement:

else if (owner.justifyContent == FlexBox::JustifyContent::spaceAround) {
    additionalMarginLeft = additionalMarginRight
            = std::max(Coord(),
                       (containerLineLength - lineInfo[row].totalLength) / std::max(1, 2 * numColumns));
} else if (owner.justifyContent == FlexBox::JustifyContent::spaceEvenly) {
    additionalMarginRight = std::max(Coord(),
                                     (containerLineLength - lineInfo[row].totalLength) /
                                     std::max(1, numColumns + 1));
    x = additionalMarginRight;
}

Of course spaceEvenly needs to be adde to the enum as well.

1 Like