Related
- Concepts — The patterns and opinions behind layout primitives.
- Grid — For two-dimensional layout requirements.
Learn flex layout
Consider these resources for learning flex layout:
- The MDN guide to CSS flex — an outline of the main features of flexbox.
- A Complete Guide to Flexbox — references for all flexbox properties with easy to follow examples and illustrations.
Props
Gap
Spacing between elements, including text and headings, should be expressed with the gap prop rather than added as margins to children. This ensures that components are composable when reused in different places, and that spacing is consistent.
Flex also supports columnGap and rowGap props, but they're only relevant for wrapping content.
Direction
The default direction for flex containers is "row", though other values are available. The most common alternative being "column", for creating vertical stacks.
NOTE: Using direction props of "row-reverse" or "column-reverse" will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader.
Alignment
The alignItems prop can be used to align items along the cross axis. When direction is "column", this refers to horizontal alignment, and when direction is "row" it refers to vertical alignment.
This example horizontally centers items in a vertical stack.
NOTE: The default value for alignItems is "stretch", which means that if your items do not have a size defined in the cross direction they will be stretched to fill the height of the container. This may be undesirable in some cases, e.g. a group of elements with varying heights. Ensure you set an alignItems value to account for this.
Justification
The justifyContent prop can be used to align items along the main axis. When direction is “column”, this refers to vertical alignment, and when direction is "row" it refers to horizontal alignment.
This example distributes the available space between each item in the container.
Wrapping
When the wrap prop is enabled, items can wrap onto multiple lines.
NOTE: When wrap is not enabled items are forced onto a single line. If there’s a chance that children may overflow ensure that you've taken other measures, e.g. allow users to scroll the container.
Patterns
Nesting
This example shows how you can nest flexboxes to create more complicated layouts. It also uses the flex prop on children to expand them to fill a ratio of the remaining space.