How to make a stretchable layout with FlexBox


Hello everybody,

I’m currently drafting a very simple layout powered by the FlexBox class, made of two columns and a resizer bar in between. I’d like to reproduce the behavior of StretchableLayoutManager and StretchableLayoutResizerBar (now dreprecated) where dragging the resizer bar changes the size of the other elements.

So far I managed to set up the FlexBox and the FlexItem’s quite easily (pseudocode):

container (FlexBox)
	column1 (FlexItem: width=0, grow=1)
	resizer (FlexItem: width=20, grow=0)
	column2 (FlexItem: width=0, grow=1)

However I’m not sure how to make the resizer actually resize the columns. I was thinking to override its mouseDrag method and change the width of column1, but it looks hackish. What is in your opinion the best/most JUCE-oriented way to make a dynamic layout like that with FlexBox?


Also have a look at some general FlexBox tutorials (e.g. for CSS)


@adamski thanks for the insight. Actually I think I’m following the same approach as suggested in the thread you linked. I still can’t figure out how to make a resizer bar work, as a StretchableLayoutResizerBar would do in a StretchableLayoutManager layout. Any suggestions on that front?