Flow¶
The Flow component organizes child components in flexible layouts with control over orientation, alignment, and spacing.
Configuration¶
Configure the Flow component layout with these options:
| Option | Description |
|---|---|
| Orientation | Set layout direction - horizontal (row) or vertical (column) |
| Wrap | Allow items to wrap to new lines when space is limited |
| Align items | Control cross-axis alignment (start, center, end, stretch, baseline) |
| Justify items | Control main-axis alignment and spacing distribution |
| Gap | Set spacing between items (e.g., 5px, 5%, 1pt) |
Standard styling options (background color, padding, margins) are available.
Use Cases¶
- Side-by-side layouts - place charts, images, or text blocks horizontally using horizontal orientation
- Stacked content - organize sequential elements like paragraphs or sections using vertical orientation
- Responsive sections - use wrap option to create layouts that adapt to different screen sizes
- Aligned grids - combine alignment and justify options for precise positioning
Tips¶
- Use Gap instead of margins for consistent spacing between items
- Enable Wrap for responsive layouts that adapt to content width
- Combine multiple Flow components to create complex grid-like layouts