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).
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
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
If you have a look at the
ColorPicker, you will see that it is made by rows:
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
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