# How to make a stretchable layout with FlexBox

**URL:** <https://forum.juce.com/t/how-to-make-a-stretchable-layout-with-flexbox/21549>\
**Category:** General JUCE discussion\
**Created:** [March 28, 2017, 3:57pm UTC](https://forum.juce.com/t/how-to-make-a-stretchable-layout-with-flexbox/21549 "2017-03-28T15:57:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![monocasual](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/monocasual/32/1056_2.png) [@monocasual](https://forum.juce.com/u/monocasual)\
**Post date:** [March 28, 2017, 3:57pm UTC](https://forum.juce.com/t/how-to-make-a-stretchable-layout-with-flexbox/21549/1 "2017-03-28T15:57:26Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![adamwilson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/adamwilson/32/1387_2.png) [@adamwilson](https://forum.juce.com/u/adamwilson)\
**Post date:** [March 29, 2017, 1:23pm UTC](https://forum.juce.com/t/how-to-make-a-stretchable-layout-with-flexbox/21549/2 "2017-03-29T13:23:34Z")

</div>

> [@FlexBox - simplest use](https://forum.juce.com/t/flexbox-simplest-use/21141):
>
> 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 }; flex.items.add(item); } flex.performLayout(getLocalBounds().reduced(10).withHeight(25)); }

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

---

<div class="post-metadata">

**Author:** ![monocasual](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/monocasual/32/1056_2.png) [@monocasual](https://forum.juce.com/u/monocasual)\
**Post date:** [March 30, 2017, 8:04am UTC](https://forum.juce.com/t/how-to-make-a-stretchable-layout-with-flexbox/21549/3 "2017-03-30T08:04:44Z")

</div>

@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?