# Nested FlexBox items?

**URL:** <https://forum.juce.com/t/nested-flexbox-items/22181>\
**Category:** General JUCE discussion\
**Created:** [May 1, 2017, 10:35pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181 "2017-05-01T22:35:17Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 1, 2017, 10:35pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/1 "2017-05-01T22:35:17Z")

</div>

I haven’t seen this asked or answered. Is it possible to nest FlexBoxes inside of Flexboxes? I saw this constructor for FlexItem: `FlexItem (FlexBox& flexBoxToControl) noexcept;` but I haven’t been able to get it to work properly.

The sequence I’m using is:

1. create Component that needs positioning and make it visible

2. Add component to FlexItem:

3. Add FlexItem to `FlexBox subInterface`

4. Add FlexBox to FlexItem mainInterfaceItem( subInterface)

5. add mainInterfaceItem to FlexBox:

6. in resized(), call `mainInterface.performLayout(getLocalBounds().reduced(5));`  
however, nothing shows up.

`addAndMakeVisible( elem = new PlaceholderComponent("place holder") );`  
`subInterface.items.add( *elem );`  
`mainInterface.items.add(subInterface.withFlex(0.2));`

I’m simplifying it a bit for the post, but is that the right usage if I want to do some flexBox nesting?

Here’s a nice visual example I found showing what i’m talking about:  
https://codepen.io/sunnykimrox/embed/preview/npyiK?height=300&slug-hash=npyiK&default-tabs=css,result&host=https://codepen.io&embed-version=2

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 2, 2017, 1:55am UTC](https://forum.juce.com/t/nested-flexbox-items/22181/2 "2017-05-02T01:55:26Z")

</div>

figured it out!

```
    elements.add(new PlaceHolder("content box", false ) );
    auto& content = *(elements.getLast());
    addAndMakeVisible( content );
    contentBox.items.add(FlexItem( content ).withFlex(1.0));
    FlexItem contentItem(contentBox);
    interface.items.add(contentItem.withFlex(2.0).withMargin({5.0, 0.0, 5.0, 0.0}));
```

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 3, 2017, 4:16am UTC](https://forum.juce.com/t/nested-flexbox-items/22181/3 "2017-05-03T04:16:35Z")

</div>

ok, for the life of me, I cannot figure out why this crash is happening when I select ‘9’ from the comboBox:

header file:

```auto
struct PlaceHolder : public Component {
PlaceHolder(const String& _title, bool _gap) : Component(_title) { title = _title; gap = _gap; }
    ~PlaceHolder() {}
    void paint( Graphics& g ) override {
        if( !gap ) {
            g.setColour(juce::Colour(24, 120, 41));
            g.fillRoundedRectangle(getLocalBounds().toFloat(), 5);
        } 
        g.setColour(Colours::black );
        g.drawText(title, getLocalBounds(), juce::Justification::centred);
    }
    void mouseDown(const juce::MouseEvent &event) override{
        DBG( "Width: " + String(getWidth()) );
    }
    String title;
    bool gap;
};

```

```auto
class FlexView : public Component,
public ComboBox::Listener
{
public:
    FlexView();
    ~FlexView() {}

    void paint (Graphics&) override;
    void resized() override;
    void comboBoxChanged(juce::ComboBox *comboBoxThatHasChanged) override;

private:
    int loadedSession = 0;
    ComboBox allUsersList;
    OwnedArray<Component> elements;
};

```

implementation:

```auto
FlexView::FlexView() {
    allUsersList.addListener(this);
    for( int i = 1; i < 10; ++i) {
        allUsersList.addItem(String(i), i);
    }
    allUsersList.setSelectedItemIndex(0);
}

void FlexView::comboBoxChanged(juce::ComboBox *comboBoxThatHasChanged) {
    if( comboBoxThatHasChanged == &allUsersList ) {
        DBG( "comboBoxChanged selectedID:" + String(allUsersList.getSelectedId()) );
        loadedSession = allUsersList.getSelectedItemIndex();
        allUsersList.setSelectedItemIndex(loadedSession);
        resized();
    }
}

```

```auto
void FlexView::resized() {
    elements.clear();
    FlexBox headerBox;
    {
        headerBox.items.add(FlexItem(allUsersList).withFlex(1.0).withMargin({2.0}) );
        addAndMakeVisible(allUsersList);
    }
    FlexBox contentBox;
    {
        FlexBox segmentBox;
        segmentBox.flexWrap = FlexBox::Wrap::wrap;
        segmentBox.flexDirection = FlexBox::Direction::row;
        {
            auto user = allUsersList.getSelectedItemIndex() + 1;
            DBG( "count: " + String( user ) );
            for( int i = 0; i < user; ++i ) {
                segmentBox.items.add( FlexItem(1, 1).withFlex(1).withMargin({2.0}).withMinWidth(80) );
                auto& flexItem = segmentBox.items.getReference( segmentBox.items.size() - 1);
                elements.add( new PlaceHolder("segmentBox" + String(i+1), false) );

                addAndMakeVisible( elements[elements.size()-1] );
                flexItem.associatedComponent = elements[elements.size()-1];

            }
        }
        contentBox.items.add( FlexItem(segmentBox).withFlex(1.0).withMargin({2.0}) );
    }
    FlexBox selectedSequenceBox;
    {
        elements.add( new PlaceHolder("selectedSequenceBox", false) );
        addAndMakeVisible( *(elements.getLast()) );
        selectedSequenceBox.items.add( FlexItem( *(elements.getLast()) ).withFlex(1.0).withMargin({2.0}) );
    }
    FlexBox footerBox;
    {
        elements.add( new PlaceHolder("footerBox", false) );
        addAndMakeVisible( *(elements.getLast()) );
        footerBox.items.add( FlexItem( *(elements.getLast()) ).withFlex(1.0).withMargin({2.0}) );
    }
    FlexBox interface;

    interface.flexDirection = FlexBox::Direction::column;
    interface.items.add( FlexItem(headerBox).withFlex(0.5) );
    interface.items.add( FlexItem(contentBox).withFlex(1) );
    interface.items.add( FlexItem(selectedSequenceBox).withFlex(0.5) );
    interface.items.add( FlexItem(footerBox).withFlex(0.5) );

    interface.performLayout(getLocalBounds());
}

```

I don’t know why the segmentBox nested code is causing problems. here’s what it looks like when you select something between 2 and 8:

 ![](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/5/59289274945fc2b7201f5125c1313ea7ef780367.png)

As you can see, item 1 is never drawn, which is just odd. When I select 9 from the combobox, I get a crash in the juce::FlexBoxLayoutCalculation::alignItemsByJustifyContent(), being given an ‘EXC\_BAD\_ACCESS’ crash.

---

<div class="post-metadata">

**Author:** ![uuich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/uuich/32/19970_2.png) [@uuich](https://forum.juce.com/u/uuich)\
**Post date:** [May 3, 2017, 7:51am UTC](https://forum.juce.com/t/nested-flexbox-items/22181/4 "2017-05-03T07:51:18Z")

</div>

would you mind to upload stripped down files so i can just drop them down into solution ?

---

<div class="post-metadata">

**Author:** ![uuich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/uuich/32/19970_2.png) [@uuich](https://forum.juce.com/u/uuich)\
**Post date:** [May 3, 2017, 8:30am UTC](https://forum.juce.com/t/nested-flexbox-items/22181/5 "2017-05-03T08:30:55Z")

</div>

tried to do it myself but there are many surprises on the go.  
anyway, i dont think that setting it all up in `resized()` method is the best idea to consider. it will be called several times during the startup and perhaps under some other activity. there are many crucial thing happening in conjunction to the state of your program. no ?

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://forum.juce.com/u/jules)\
**Post date:** [May 3, 2017, 8:40am UTC](https://forum.juce.com/t/nested-flexbox-items/22181/6 "2017-05-03T08:40:58Z")

</div>

Creating and destroying all your child components in resized() isn’t going to work, and presumably somewhere you’re leaving a dangling pointer to a child component hanging around which a flexbox object is attempting to position.

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 3, 2017, 11:49am UTC](https://forum.juce.com/t/nested-flexbox-items/22181/7 "2017-05-03T11:49:13Z")

</div>

Sure thing, here ya go @uuich

[MainComponent.cpp](https://forum.juce.com/uploads/short-url/alT88hcbvhr3xJCAKLcWT5YOvaB.cpp) (3.1 KB)  
[MainComponent.h](https://forum.juce.com/uploads/short-url/blN4QWThx2LMd8P2EqM6Qh0z9fp.h) (2.0 KB)

regarding doing all the work in resized(), I was just following what was shown here: [FlexItem with dynamic width](https://forum.juce.com/t/flexitem-with-dynamic-width/21119/3)

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://forum.juce.com/u/jules)\
**Post date:** [May 3, 2017, 11:50am UTC](https://forum.juce.com/t/nested-flexbox-items/22181/8 "2017-05-03T11:50:49Z")

</div>

> [@matkatmusic](#):
>
> regarding doing all the work in resized(), I was just following what was shown here: [FlexItem with dynamic width - #3 by fefanto](https://forum.juce.com/t/flexitem-with-dynamic-width/21119/3)

No, you’re misunderstanding that. Sure, create your FlexBox objects in resized, that’s trivial, but you shouldn’t mess around creating/adding/removing child components in there.

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 3, 2017, 12:01pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/9 "2017-05-03T12:01:55Z")

</div>

ok. based on my debug statements, resized() was only being called twice. Once when the app loads, and then once again when setSelectedId() the comboBox in the MCC constructor. If i didn’t have resized() inside the comboBoxChanged() method, resized() would only be called once.

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 3, 2017, 12:29pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/10 "2017-05-03T12:29:33Z")

</div>

ok, I modified things so construction happens in the comboBoxChanged() method:

```auto
void MainContentComponent::comboBoxChanged(juce::ComboBox *comboBoxThatHasChanged) {
    if( comboBoxThatHasChanged == &allUsersList ) {
        DBG( "comboBoxChanged selectedID:" + String(allUsersList.getSelectedItemIndex()) );
        loadedSession = allUsersList.getSelectedItemIndex() + 1;
        elements.clear(); //this is OwnedArray<Component> elements;
        for( int i = 0; i < loadedSession; ++i ) {
            elements.add( new PlaceHolder("segmentBox" + String(i+1), false) );
        }
        resized();
    }
}

```

in resized(), the segmentBox nested section:

```auto
    FlexBox contentBox;
    {
        FlexBox segmentBox;
        segmentBox.flexWrap = FlexBox::Wrap::wrap;
        segmentBox.flexDirection = FlexBox::Direction::row;
        {
            for( int i = 0; i < elements.size(); ++i ) {
                auto &newElement = *elements[i];
                DBG( "name: " + newElement.getName() );
                addAndMakeVisible( newElement );
                segmentBox.items.add( FlexItem( newElement ).withFlex(1.0).withMargin({2.0}));
            }
        }
        contentBox.items.add( FlexItem(segmentBox).withFlex(1.0).withMargin({2.0}) );
    }

```

I just do not understand what is happening ☹ Why is segment1 never shown???

 ![](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/2/272b4b4cdffb8923d314254d315ca7568d151617.png)

---

<div class="post-metadata">

**Author:** ![uuich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/uuich/32/19970_2.png) [@uuich](https://forum.juce.com/u/uuich)\
**Post date:** [May 3, 2017, 12:36pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/11 "2017-05-03T12:36:32Z")

</div>

> [@matkatmusic](#):
>
> for( int i = 0; i \< loadedSession; ++i ) {  
> elements.add( new PlaceHolder(“segmentBox” + String(i+1), false) );  
> }

++i ?

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 3, 2017, 12:41pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/12 "2017-05-03T12:41:32Z")

</div>

regarding i++ vs ++i: [http://stackoverflow.com/questions/24901/is-there-a-performance-difference-between-i-and-i-in-c](http://stackoverflow.com/questions/24901/is-there-a-performance-difference-between-i-and-i-in-c)

---

<div class="post-metadata">

**Author:** ![uuich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/uuich/32/19970_2.png) [@uuich](https://forum.juce.com/u/uuich)\
**Post date:** [May 3, 2017, 12:42pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/13 "2017-05-03T12:42:51Z")

</div>

i know, but isnt it passing +1 to your for loop scope ?  
**edit :**  
what i mean is that your `i` reaches the scope already incremented

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 3, 2017, 12:47pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/14 "2017-05-03T12:47:25Z")

</div>

wrong:

 ![](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/7/78b4d4ceb65a079bfa8836d4b57feac9d0ed9eae.png)

---

<div class="post-metadata">

**Author:** ![xenakios](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/xenakios/32/4047_2.png) [@xenakios](https://forum.juce.com/u/xenakios)\
**Post date:** [May 3, 2017, 12:47pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/15 "2017-05-03T12:47:42Z")

</div>

> [@uuich](#):
>
> what i mean is your `i` reaches the scope already incremented, so its not standing from zero at any time

If it works like that, I’ve been doing wrong code for the past 5 years or so. (So no, doing a for loop like that will work, but of course it doesn’t affect performance in any way. Doing ++i instead of i++ is just to get in the habit of using ++i in case the i is not a trivial integer but rather some more heavy iterator object which might be slow if i++ is done on it.)

---

<div class="post-metadata">

**Author:** ![uuich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/uuich/32/19970_2.png) [@uuich](https://forum.juce.com/u/uuich)\
**Post date:** [May 3, 2017, 12:51pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/16 "2017-05-03T12:51:02Z")

</div>

sure thing, but im not discussing luxury of getting into right habbit, just pointing that the **i** is already incremented while @matkatmusic is instantiating his placeholders. obvoiusly i should run the code myself, but its not possible at the moment. sorry i cant help now

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 3, 2017, 12:51pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/17 "2017-05-03T12:51:38Z")

</div>

Look at the screenshot I posted. i is 0 the first time around. it is not 1 as you are assuming.

---

<div class="post-metadata">

**Author:** ![uuich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/uuich/32/19970_2.png) [@uuich](https://forum.juce.com/u/uuich)\
**Post date:** [May 3, 2017, 12:52pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/18 "2017-05-03T12:52:42Z")

</div>

honestly im shocked, considering my knowledge of course !

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 3, 2017, 12:56pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/19 "2017-05-03T12:56:32Z")

</div>

Test it yourself:

```auto
for( int i = 0; i < 5; ++i ) {
    DBG( "++i: "+ String(i) );
}
for( int i = 0; i < 5; i++ ) {
    DBG( "i++: " + String(i) );
}

```

![](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/f/fc81c0b3563f754037c61df4507af0aedcb68d59.png)

---

<div class="post-metadata">

**Author:** ![uuich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/uuich/32/19970_2.png) [@uuich](https://forum.juce.com/u/uuich)\
**Post date:** [May 3, 2017, 12:57pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/20 "2017-05-03T12:57:53Z")

</div>

yeah, i just tried. i blame myself. for my whole life ive been avoiding ++i in a simple for loop scenarios assuming that it will be already inremented while reaching the scope

[Next page](https://forum.juce.com/t/nested-flexbox-items/22181.md?page=2)