Flex

A flexible layout component that uses CSS Flexbox to arrange child components horizontally (row) or vertically (column). It offers control over alignment, justification, gaps, and wrapping, and includes a default top margin of 20 px for vertical spacing.

Use Cases

• Form layouts with side‑by‑side fields (row direction)
• Button groups with horizontal alignment
• Vertical stacking with controlled spacing (column direction)
• Center‑aligned content (both horizontal and vertical centering)
• Responsive layouts with wrap: 'wrap' (items wrap to next line on narrow screens)

Properties

direction

Main axis direction – controls whether items flow horizontally (row) or vertically (column). Type: string. Options: row, column. Default: row.

Visual impact: row – items arranged horizontally left‑to‑right; column – items arranged vertically top‑to‑bottom.

Tip: Use 'row' for side‑by‑side form fields or horizontal button groups; use 'column' for vertical content stacks with controlled spacing.

justifyContent

Alignment along the main axis (horizontal for row, vertical for column). Type: string. Options: start, center, end. Default: start.

Visual impact: start – items aligned to start (left for row, top for column); center – items centered on main axis; end – items aligned to end (right for row, bottom for column).

Tip: Use 'start' or 'end' for button groups aligned left/right; use 'center' for centered content.

gap

Spacing between flex items in pixels. Type: number. Default: 24.

Visual impact: 0 – no gap (items touch); 8 – very tight spacing; 12 – tight spacing; 16 – compact spacing; 24 – balanced spacing (recommended default); 32 – generous spacing.

Tip: Use 16‑24 px for form field spacing, 12‑16 px for button groups, 24‑32 px for spaced sections.

wrap

Whether items should wrap to the next line when the container is too narrow. Type: string. Options: wrap, nowrap. Default: wrap.

Visual impact: wrap – items wrap to next line on narrow screens (responsive layout); nowrap – items stay on one line, may shrink or overflow.

Tip: Use 'wrap' for mobile‑friendly layouts; use 'nowrap' when items must stay on a single line.

items

Array of child components to arrange in the flex layout. Type: slot. Required: true. Minimum items: 1.

customCss

Custom CSS styles for advanced styling of the flex container. Parsed as CSS property‑value pairs. Type: string.

Tip: Add background colors or gradients to visually group flex sections, add padding for separation, or use border‑radius for a modern card‑like appearance.

Security note: Parsed by cssParser utility. Tenants only affect their own pages (multi‑tenant isolation enforced).

Best Practices

• CRITICAL: ALWAYS set gap: 24 (or 16‑32 px) – without gap, items touch each other with no spacing
• Default margin‑top: 20 px provides vertical spacing – can be overridden with customCss if needed
• Use Flex with direction: 'row' for horizontal form field pairs
• Use Flex with direction: 'column' for vertical stacking with gaps
• Set wrap: 'wrap' for responsive layouts that adapt to narrow screens
• Use justifyContent for precise alignment control
• Prefer Grid when you need equal‑width columns; use Flex for unequal widths or specific alignment needs

Common Mistakes

Using Flex WITHOUT setting gap property

Why it's a problem: Items touch each other with no spacing – looks cramped and unprofessional

Fix: ALWAYS set gap: 24 for balanced spacing: {direction: 'row', gap: 24}

Not setting wrap: 'wrap' for responsive layouts

Why it's a problem: Items don’t wrap on narrow screens – they shrink or overflow, breaking mobile layout

Fix: Set wrap: 'wrap' when items should stack on mobile (e.g., form fields, button groups)

Using Flex when Grid would be simpler

Why it's a problem: Grid is better for equal‑width columns. Flex requires more configuration for same result.

Fix: Use Grid for equal‑width multi‑column layouts (2‑column forms). Use Flex for unequal widths or specific alignment needs.

Forgetting to set gap between items

Why it's a problem: Items touch each other with no spacing – looks cramped and unprofessional

Fix: Always set gap: 24 for balanced spacing between items

Using direction: 'row' without wrap: 'wrap' for many items

Why it's a problem: Many items in a row overflow on narrow screens – horizontal scrolling on mobile

Fix: Set wrap: 'wrap' for rows with multiple items that should wrap on mobile