A gtk.flow_box.FlowBox puts child widgets in reflowing grid.

For instance, with the horizontal orientation, the widgets will be arranged from left to right, starting a new row under the previous row when necessary. Reducing the width in this case will require more rows, so a larger height will be requested.

Likewise, with the vertical orientation, the widgets will be arranged from top to bottom, starting a new column to the right when necessary. Reducing the height will require more columns, so a larger width will be requested.

The size request of a gtk.flow_box.FlowBox alone may not be what you expect; if you need to be able to shrink it along both axes and dynamically reflow its children, you may have to wrap it in a gtk.scrolled_window.ScrolledWindow to enable that.

The children of a gtk.flow_box.FlowBox can be dynamically sorted and filtered.

Although a gtk.flow_box.FlowBox must have only gtk.flow_box_child.FlowBoxChild children, you can add any kind of widget to it via gtk.flow_box.FlowBox.insert, and a gtk.flow_box_child.FlowBoxChild widget will automatically be inserted between the box and the widget.

Also see gtk.list_box.ListBox.

CSS nodes

flowbox
├── flowboxchild
│   ╰── <child>
├── flowboxchild
│   ╰── <child>
┊
╰── [rubberband]

gtk.flow_box.FlowBox uses a single CSS node with name flowbox. gtk.flow_box_child.FlowBoxChild uses a single CSS node with name flowboxchild. For rubberband selection, a subnode with name rubberband is used.

Accessibility

gtk.flow_box.FlowBox uses the gtk.types.AccessibleRole.Grid role, and gtk.flow_box_child.FlowBoxChild uses the gtk.types.AccessibleRole.GridCell role.