FlexBox - simplest use


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 };


How to make a stretchable layout with FlexBox

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


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…


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


Cheers all! Much appreciated.