I use code like this
Rectangle<int> r({ getWidth() /2 , 0 },
{ x2 , getHeight() });
FlexBox flex;
flex.flexDirection = FlexBox::Direction::row;
flex.flexWrap = FlexBox::Wrap::noWrap;
flex.items.add(FlexItem(*dryVU).withFlex(1, 1, 30).withMargin(FlexItem::Margin(20,0, 20,0)));
flex.items.add(FlexItem(*dryFader).withFlex(0,1,50).withMargin(FlexItem::Margin(0, 0, 20, 0)));
flex.items.add(FlexItem(*wetVU).withFlex(1, 1, 30).withMargin(FlexItem::Margin(20, 0, 20, 0)));
flex.items.add(FlexItem(*wetFader).withFlex(0,1,50).withMargin(FlexItem::Margin(0, 0, 20, 0)));
flex.performLayout(BorderSize<int>(10).subtractedFrom(r));
This code, layouts the given components in 4 columns.
And the result is, depending on the given rectangle, that sometimes the right-border will overlap with the left-border of a component with 1 pixel. The rounding algorithm should be changed, so that components (which always have integer coordinates) will always have a zero pixel gap (if not defined differently)