Hopper

Flex

A flex component is used to create a flex container.

View sourceView on npmReport an issue
AI Tip Want to skip the docs? Use the MCP Server

Usage

Vertical Alignment

A flex layout can have vertically aligned items.

Gap

A flex layout can have a gap between his items. columnGap and rowGap are also available to specify a gap for a single axis.

Align Items

A flex layout can align its items along the cross-axis. When the direction is "column", this refers to horizontal alignment, and when the direction is "row", it refers to vertical alignment.

Justify Content

A flex layout can justify its items along the main axis. When the direction is "column", this refers to vertical alignment, and when the direction is "row", it refers to horizontal alignment.

Reverse

A flex layout can show its items in reverse order.

Wrap

Flex layout items can wrap multiple rows.

Nesting

Flex layouts can be nested.

Best Practices

Flex should be used for general-purpose flexible layouts when you need more control than Inline or Stack provide. For simple horizontal rows with centered items, use Inline. For simple vertical stacks, use Stack. Use Flex when you need to customize multiple layout properties, use responsive direction changes, or apply flex properties to individual children.

Flex should:

  • Be used when you need to customize two or more layout properties (e.g., both alignItems and justifyContent).
  • Handle responsive layouts where direction changes based on breakpoints.
  • Be preferred over Inline or Stack when children need individual flex properties like flex, order, or custom alignment.
  • Use Hopper space tokens for gap, rowGap, and columnGap to ensure consistency.

Do's and Don'ts

Do
Use Inline for simple horizontal layouts with centered items
Don't
Use Flex with default direction='row' and alignItems='center' when Inline is sufficient
Do
Use Stack for simple vertical layouts with consistent spacing
Don't
Use Flex with direction='column' when Stack is sufficient

Props

direction?

The flex direction of the container. Can be row, column, row-reverse or column-reverse.

wrap?

Whether to wrap the flex items. The value can also be a boolean.

basis?

An alias for the css flex-basis property.

grow?

An alias for the css flex-grow property.

shrink?

An alias for the css flex-shrink property.

inline?

Whether to display the flex container as an inline element.

style?
className?

Migration Notes

Coming from Orbiter, you should be aware of the following changes:

  • fluid has been removed.
  • reverse is not supported, use direction instead. Here's an example.