Advanced Flexbox
Choose Design > Layout > Advanced > Display > flex on the parent container.
Direction and Wrapping
- Flex Direction — Row, Column, Row Reverse, or Column Reverse. Row's main axis is horizontal; Column's is vertical. Reversal changes visual order, not document order.
- Flex Wrap — No Wrap keeps one line; Wrap adds lines; Wrap Reverse reverses their cross-axis order.
Alignment
| Control | Options and effect |
|---|---|
| Align Items | Stretch, Flex Start, Flex End, Center, or Baseline. Aligns children across the main axis. Baseline aligns their text baselines. |
| Justify Content | Flex Start, Flex End, Center, Space Between, Space Around, or Space Evenly. Positions children or distributes free space along the main axis. |
| Align Content | Flex Start, Flex End, Center, Space Between, Space Around, Stretch, or Baseline. Aligns or distributes the lines of a wrapping layout. |
Space Between puts space between items, Space Around around them, and Space Evenly equally between items and at edges. Align Content needs multiple lines and free cross-axis space; Align Items aligns within each line.
Spacing
- Gap — Between items and lines, excluding outer padding.
- Row Gap — Override row spacing.
- Text Align — Inherited Left, Center, or Right alignment.
Child margins add spacing. Direction, alignment, wrap, gaps, and text alignment support responsive values; Advanced and flex remain shared. No-wrap items can shrink according to their flex sizing.