How to use FlexBox in a practical way

I have seen the demos of the FlexBox, but I don’t understand how to put it to a real use in my app. More specifically, I don’t understand what to do with a FlexItem beyond what I can see in the demo. These FlexItems have almost zero functionality or customisability on their own, so I’m wondering what to do with them. Should I create a new class that inherits FlexItem for example?

void MainContentComponent::resized() {
  FlexBox fb;
  fb.direction = FlexBox::Direction::column;
  fb.items.add( FlexItem( classMemberComponent1NeedingAutoLayout ).withFlex(1.0) );
  fb.items.add( FlexItem( classMemberComponent2NeedingAutoLayout ).withFlex(1.0) );
  fb.items.add( FlexItem( classMemberComponent3NeedingAutoLayout ).withFlex(1.0) );

  fb.performLayout(getLocalBounds() );
}

Do this in a new project with the Projucer and use the live Compile to tweak the withFlex parameter.

after you see how .withFlex() changes the spacing of everything, try adding things to getLocalBounds() like

.withTrimmedLeft() or withTrimmedTop() 
etc etc

then try adding other things to the .withFlex() like:

.withFlex().withMinHeight()
or
.withFlex().withMaxHeight()
or 
.withWidth()
etc..

then after you are done tinkering with that, drag the bounds of your mainContentComponent in projucer’s live component preview and watch the magic. Or if you’re a real baller, convert your mainContentComponent to a ResizableWindow and watch the magic happen from the compiled version.

3 Likes

Cool thanks. I’ll give this a try