How to use FlexBox in a practical way

General JUCE discussion
2 
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