What's the difference between VBoxContainer and VFlowContainer?

Question

I'm trying to build some UI for my game made in Godot 4.0. I want to make a "Toolbox" scene and need to decide what containers to use. I come from web development, where I'd use a flex column and each tool would be a single row in that column of items.

In Godot 4 I have many options, the two relevant ones are nearly indistinguishable:

• VBoxContainer
  • UI Description is "Vertical box container."
  • Official docs only say "Vertical box container" and tell me it has a separation property.
• VFlowContainer
  • UI Description is "Vertical flow container."
  • Official docs say "Vertical flow container." and tell me it has both a h_separation and v_separation property

The control tree in the Godot UI has some hints. The icon for VBoxContainer suggests it's what I want, but then again it lists a ColorPicker as a child of that type of node so that throws me off again.

What's the difference between these two controls, and when would I use one over the other?

Answer 1

First of all, these are Containers. So they will resize and arrange their children Controls. Adjusting to both the space available and the size of the children (which I reiterate that the Container can resize, so pay attention to container sizing properties of its children, which used to be called size flags in Godot 3.x).

In particular:

• VBoxContainer: Will arrange the children Controls in rows. One per row. Might grow vertically.
• HBoxContainer: Will arrange the children Controls in columns. One per column. Might grow horizontally.
• VFlowContainer: Will arrange the children Controls in columns. As many as it can fit per column, i.e. one per row until it runs out of vertical space and then start a new column. It does not force vertical alignment or sizes (elements of different columns might not align). Might grow horizontally.
• HFlowContainer: Will arrange the children Controls in rows. As many as it can fit per row, i.e. one per column until it runs out of horizontal space and then starts a new row. It does not force horizontal alignment or sizes (elements of different rows might not align). Might grow vertically.
• GridContainer: Will arrange the children Controls in rows and columns. As many as configured per row. It controls spacing and position to make a grid. Might grow vertically.

You can put any of the mentioned Containers inside of a ScrollContainer to get scroll bars.

---

I also want to mention a couple specialized classes:

• MenuBar: It will make menu bars by adding children PopupMenus. Good for non-game application. It does not flow. You could make menu bars or tool bars with HFlowContainer and children MenuButton.
• Tree: It will make a tree like the ones you see in FileSystem or Scene in the Godot editor. It cal also make tables with multiple columns, where each row is an item. You must populate it from code. Also, it handles it own scrolling.

---

I don't know what you mean by "Toolbox". However, given that you mention flex column, I would suggest VFlowContainer, which I remind you might result in more than one column… If you don't want that use VBoxContainer instead.

---

If you have a look at the ColorPicker, you will see that it is made by rows:

The ColorPicker is a VBoxContainer so it gets to reuse all its logic.

For the curious, the first three rows are HBoxContainer, which is how they get multiple Controls in the same row. Then we have a GridContainer to make the color bars (made out of Label, HSlider, and SpinBox). The hex input is inside another HBoxContainer. And the "accordion"s on the bottom are Buttons controlling the visibility of GridContainer for the color presets (which are also Buttons).