FlexBox - simplest use

1

I’ve had FlexBox working before but have become incompetent since then …

Here’s a simple use that does fuck all: Can someone tell me what I have to do to get my items to actually layout on the screen from here with some arbitrary layout of your choice?

void MainContentComponent::resized()
{
	FlexBox flex;

	for (auto b : buttons)
	{
		FlexItem item{ *b };
		flex.items.add(item);
	}

	flex.performLayout(getLocalBounds().reduced(10).withHeight(25));
}
2

You need to set some kind of size for each item

Either through the minWidth/minHeight

Or set the flexGrow value for your “item”, I tend to set it to 1 which makes every item take up the same amount of space

But you could set your first item to have flexGrow 2 and then the rest 1 and the first item would take up twice as much space as all of the other items

1 Like
3

Something like:

for (auto b : buttons)
{
	FlexItem item{ *b };
	flex.items.add (item)
              .withFlex (1.0)   // to lay them all out equally
}

You might also want to use .withMargin, except for the last item, e.g. from some of my code:

for (int i = 0; i < NUM_TRACKS; ++i)
{
    flexBox.items.add (FlexItem(tracks[i])
                 .withFlex (1.0)
                 .withMargin ({0, (i == NUM_TRACKS-1 ? 0.0f : 10.0f), 0, 0}));
}

I was actually wondering about a neater way to do that without using a traditional for-loop…

1 Like
4

EDIT: Realised I was using .withFlex in an odd way which worked but @andyb91’s comment showed me a better way… post edited.

1 Like
5

Cheers all! Much appreciated.