Flex
One-dimensional layout component for arranging children in rows or columns with alignment and spacing control
Flex is a one-dimensional layout component for arranging children in rows or columns with alignment and spacing control. It extends Box, inheriting all Box capabilities (padding, elevation, rounding, self-alignment, and polymorphic as prop).
Recommended default: Use Flex for most layouts. Since it extends Box, you get all Box capabilities without needing to nest components.
Installation
npm install --save @godaddy/antaresProps
The Flex component accepts the following props:
display?"flex" | "inline-flex" | undefined'flex'The display property for the flex container.
direction?"row" | "column" | "row-reverse" | "column-reverse" | undefined'row'The direction in which to layout children.
wrap?"wrap" | "nowrap" | "wrap-reverse" | undefined—Whether to wrap items onto multiple lines.
as?(ElementType & C) | undefined'div'Polymorphic element type.
padding?Spacing | Spacing[] | undefined—Padding on all sides. Accepts single value or array.
inlinePadding?Spacing | Spacing[] | undefined—Padding on inline (horizontal) direction.
inlinePaddingStart?Spacing | undefined—Padding on inline start (left in LTR).
inlinePaddingEnd?Spacing | undefined—Padding on inline end (right in LTR).
blockPadding?Spacing | Spacing[] | undefined—Padding on block (vertical) direction.
blockPaddingStart?Spacing | undefined—Padding on block start (top).
blockPaddingEnd?Spacing | undefined—Padding on block end (bottom).
elevation?"base" | "card" | "raised" | "overlay" | undefined—Elevation levels for visual depth.
rounding?Rounding | undefined—Rounding values for border radius.
alignSelf?"end" | (string & {}) | "auto" | "start" | "center" | "normal" | "flex-start" | "flex-end" | "self-start" | "self-end" | "stretch" | undefined—In Flex/Grid layout. Cross-axis alignment within flex/grid container.
justifySelf?"end" | (string & {}) | "auto" | "start" | "center" | "normal" | "flex-start" | "flex-end" | "self-start" | "self-end" | "stretch" | "left" | "right" | undefined—In Flex/Grid layout. Main-axis alignment within flex/grid container.
order?string | number | undefined—In Flex/Grid layout. Layout order within flex/grid container.
flex?string | number | undefined—In Flex/Grid layout. Flex shorthand for grow, shrink, and basis.
flexGrow?string | number | undefined—In Flex/Grid layout. How much the item will grow relative to siblings.
flexShrink?string | number | undefined—In Flex/Grid layout. How much the item will shrink relative to siblings.
flexBasis?string | undefined—In Flex/Grid layout. Initial main size before growing/shrinking.
gridArea?string | undefined—In Flex/Grid layout. Named grid area for placement.
gridColumnStart?string | undefined—In Flex/Grid layout. Grid column start line.
gridColumnEnd?string | undefined—In Flex/Grid layout. Grid column end line.
gridRowStart?string | undefined—In Flex/Grid layout. Grid row start line.
gridRowEnd?string | undefined—In Flex/Grid layout. Grid row end line.
justifyContent?"end" | (string & {}) | "start" | "center" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined—The distribution of space around children along the main axis in flex or inline axis in grid
alignContent?"end" | (string & {}) | "baseline" | "start" | "center" | "normal" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined—The distribution of space around children along the cross axis in flex or block axis in grid
justifyItems?"end" | (string & {}) | "start" | "center" | "normal" | "stretch" | "legacy" | undefined—Defines the default justify-self for all children in a grid container.
alignItems?"end" | (string & {}) | "baseline" | "start" | "center" | "normal" | "stretch" | undefined—Sets the align-self property for each child.
gap?Spacing | Spacing[] | undefined—The gap between children.
columnGap?Spacing | undefined—The gap between columns.
rowGap?Spacing | undefined—The gap between rows.
Scale Sizes
We use the same scale sizes as the Box component. For more information, see the Box component documentation.
Examples
Default
Basic horizontal flex layout with gap.
import { Flex, type FlexProps } from '@godaddy/antares';export function DefaultExample(props: FlexProps) { return ( <Flex gap="sm" {...props}> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 1 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 2 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 3 </Flex> </Flex> );}Direction
The direction prop controls the main axis orientation.
import { Flex } from '@godaddy/antares';export function DirectionExample() { return ( <Flex direction="column" gap="lg"> <Flex direction="column" gap="sm"> <Flex as="strong">Row (default)</Flex> <Flex gap="sm"> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 1 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 2 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 3 </Flex> </Flex> </Flex> <Flex direction="column" gap="sm"> <Flex as="strong">Column</Flex> <Flex direction="column" gap="sm"> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 1 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 2 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 3 </Flex> </Flex> </Flex> <Flex direction="column" gap="sm"> <Flex as="strong">Row Reverse</Flex> <Flex direction="row-reverse" gap="sm"> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 1 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 2 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 3 </Flex> </Flex> </Flex> </Flex> );}Alignment
Use justifyContent for main-axis distribution and alignItems for cross-axis alignment.
import { Flex } from '@godaddy/antares';export function AlignmentExample() { return ( <Flex direction="column" gap="lg"> <Flex direction="column" gap="sm"> <Flex as="strong">justifyContent: space-between</Flex> <Flex justifyContent="space-between"> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Start </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Middle </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> End </Flex> </Flex> </Flex> <Flex direction="column" gap="sm"> <Flex as="strong">justifyContent: center</Flex> <Flex justifyContent="center" gap="sm"> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 1 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 2 </Flex> </Flex> </Flex> <Flex direction="column" gap="sm"> <Flex as="strong">justifyContent: end</Flex> <Flex justifyContent="end" gap="sm"> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 1 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 2 </Flex> </Flex> </Flex> <Flex direction="column" gap="sm"> <Flex as="strong">alignItems: center (with varying heights)</Flex> <Flex alignItems="center" gap="sm" style={{ height: '100px' }}> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Short </Flex> <Flex padding="lg" style={{ background: '#e0e0e0' }}> Tall </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Short </Flex> </Flex> </Flex> <Flex direction="column" gap="sm"> <Flex as="strong">alignItems: stretch (default)</Flex> <Flex alignItems="stretch" gap="sm" style={{ height: '100px' }}> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 1 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 2 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 3 </Flex> </Flex> </Flex> </Flex> );}Gap
The gap prop controls spacing between children. Use rowGap and columnGap for independent control.
import { Flex } from '@godaddy/antares';export function GapExample() { return ( <Flex direction="column" gap="lg"> <Flex direction="column" gap="sm"> <Flex as="strong">gap: xs</Flex> <Flex gap="xs"> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> </Flex> </Flex> <Flex direction="column" gap="sm"> <Flex as="strong">gap: sm</Flex> <Flex gap="sm"> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> </Flex> </Flex> <Flex direction="column" gap="sm"> <Flex as="strong">gap: md</Flex> <Flex gap="md"> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> </Flex> </Flex> <Flex direction="column" gap="sm"> <Flex as="strong">gap: lg</Flex> <Flex gap="lg"> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> </Flex> </Flex> <Flex direction="column" gap="sm"> <Flex as="strong">gap: xl</Flex> <Flex gap="xl"> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item </Flex> </Flex> </Flex> <Flex direction="column" gap="sm"> <Flex as="strong">rowGap + columnGap (with wrap)</Flex> <Flex wrap="wrap" rowGap="lg" columnGap="xs" style={{ width: '200px' }}> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 1 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 2 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 3 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 4 </Flex> </Flex> </Flex> </Flex> );}Wrap
The wrap prop controls whether items wrap to multiple lines.
import { Flex } from '@godaddy/antares';export function WrapExample() { return ( <Flex direction="column" gap="lg"> <Flex direction="column" gap="sm"> <Flex as="strong">wrap: nowrap (default)</Flex> <Flex wrap="nowrap" gap="sm" style={{ width: '200px' }}> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 1 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 2 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 3 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 4 </Flex> </Flex> </Flex> <Flex direction="column" gap="sm"> <Flex as="strong">wrap: wrap</Flex> <Flex wrap="wrap" gap="sm" style={{ width: '200px' }}> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 1 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 2 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 3 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 4 </Flex> </Flex> </Flex> <Flex direction="column" gap="sm"> <Flex as="strong">wrap: wrap-reverse</Flex> <Flex wrap="wrap-reverse" gap="sm" style={{ width: '200px' }}> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 1 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 2 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 3 </Flex> <Flex padding="sm" style={{ background: '#e0e0e0' }}> Item 4 </Flex> </Flex> </Flex> </Flex> );}Navbar
A common navigation bar pattern using space-between and nested Flex containers.
import { Flex, LinkButton, Button } from '@godaddy/antares';export function NavbarExample() { return ( <Flex as="nav" alignItems="center" justifyContent="space-between" padding="xs"> <Flex as="h1">Logo</Flex> <Flex gap="sm"> <LinkButton href="#">Home</LinkButton> <LinkButton href="#">About</LinkButton> <LinkButton href="#">Contact</LinkButton> </Flex> <Flex gap="sm"> <Button variant="primary">Sign In</Button> <Button variant="secondary">Sign Up</Button> </Flex> </Flex> );}Sidebar
A sidebar layout demonstrating Flex child props (flexShrink, flexGrow).
Main Content
This main content area uses flexGrow="1" to fill the remaining space. The sidebar uses flexShrink="0" to maintain its fixed width.
import { Flex, LinkButton } from '@godaddy/antares';export function SidebarExample() { return ( <Flex rounding="reduced"> <Flex as="aside" direction="column" gap="sm" padding="xs" flexShrink="0" style={{ width: '200px' }}> <Flex as="h3">Navigation</Flex> <LinkButton href="#">Dashboard</LinkButton> <LinkButton href="#">Settings</LinkButton> <LinkButton href="#">Profile</LinkButton> </Flex> <Flex as="main" direction="column" padding="md" flexGrow="1"> <Flex as="h2">Main Content</Flex> <Flex as="p"> This main content area uses flexGrow="1" to fill the remaining space. The sidebar uses flexShrink="0" to maintain its fixed width. </Flex> </Flex> </Flex> );}RTL Support
Flex uses CSS logical properties which automatically adapt to RTL layouts. The direction prop values (row, row-reverse) respect the document direction.
Design Tokens
All gap and padding values are derived from the theme. If no theme is provided, default values are used. This ensures consistency across the design system.
Migration from @ux/box
Current @ux/box | New Pattern |
|---|---|
<Box orientation="horizontal"> | <Flex direction="row" > |
<Box orientation="vertical"> | <Flex direction="column" > |
<Box blockAlignChildren="center"> | <Flex justifyContent="center"> |
<Box inlineAlignChildren="center"> | <Flex alignItems="center"> |