Layout / The visual dictionary

Flex layout.

A layout where children share and redistribute space along an axis.

Also calledflexboxflex row

See it in context

UI illustration

Flexible

Available space is shared

What it is

A layout where children share and redistribute space along an axis. Allow suitable items to grow, shrink, or wrap while preserving order and alignment.

When to use it

Use it for toolbars and rows whose contents have different widths.

Know the difference

Flex layout distributes available space; fixed positioning ignores normal flow.

Across platforms

WebiOSiPadOSAndroidmacOSWindowsLinux

Web · iOS · iPadOS · Android · macOS · Windows · Linux

Flexbox is a CSS mechanism; native platforms offer equivalent flexible constraints and stack behavior.

Go to the source

Primary documentation for the pattern and its platform conventions.

Apple Human Interface Guidelines — Layout

FROM NAME TO NEXT BUILD

Put it into words.

Choose a device and an effect, then copy the whole description.

Building forPhone modelAnimation effectBrowse the effect library

Create a flex layout. Allow suitable items to grow, shrink, or wrap while preserving order and alignment. Use it for toolbars and rows whose contents have different widths. Make it responsive and accessible, and follow the selected platform's interaction conventions.

Your copied description includes the component, device context, and selected animation timing.

See it in context

What it is

When to use it

Know the difference

Across platforms

Web · iOS · iPadOS · Android · macOS · Windows · Linux

Go to the source

You might also mean…

Stack layout

Spacer

Responsive layout