Container¶
A box that holds other widgets and arranges them in a row or a column.
Layout widgets · widget type div · no data binding
Related: Section · Grid Layout · Sidebar Layout
Options¶
All of a container's behaviour comes from its box.
| Option | Values | Default | Description |
|---|---|---|---|
| Display | Flex · Inline flex · Block · Inline · Inline block · None | Flex | How the box itself lays out |
| Flex Direction | Row · Column (and their reverses) | Column | Which way children stack. Shown when Display is a flex value |
| Flex Wrap | No wrap · Wrap | No wrap | Whether children wrap onto another line |
| Justify Content | Start · Center · End · Space between · Space around | Start | Alignment along the direction children run |
| Align Items | Start · Center · End · Stretch | Stretch | Alignment across that direction |
| Column Gap / Row Gap | Any CSS unit | None | Space between children |
| Width / Height | Any CSS unit | Width 100% | Explicit sizing |
Notes¶
- A new container stacks its children vertically. Set Flex Direction to row for side-by-side layout
- For a card with a header and an optional footer, use Section; for fixed rows and columns, Grid Layout