Wrap

Wrap is a layout component that adds a defined space between it's children and 'wraps' its children automatically if there's not enough space to fit any child.

Think of it as a smarter flex-wrap with spacing support. It works realy well with things like dialog buttons, tags, and chips.

Import#

Usage#

In the example, you see that the last Box wrapped to the next line.

  • Box 1
  • Box 2
  • Box 3
  • Box 4
Editable Example

Change the spacing#

Pass the spacing prop to apply a consistent spacing between each child, even if it wraps.

Pro Tip: You can pass responsive values for the spacing.

  • Box 1
  • Box 2
  • Box 3
  • Box 4
  • Box 5
Editable Example

Change the alignment#

Pass the align prop to change the alignment of the child along the main axis.

  • Box 1
  • Box 2
  • Box 3
  • Box 4
  • Box 5
Editable Example

Pass the justify prop to change the alignment of the child along the cross axis.

  • Box 1
  • Box 2
  • Box 3
  • Box 4
  • Box 5
Editable Example

Props#

Wrap extends Box, so you can pass all BoxProps in addition to these:

NameTypeDefaultDescription
spacingResponsive(string or number)0.5remThe space between the each child (even if it wraps)
justifyFlexProps['justifyContent']The justify-content value (for cross-axis alignment)
alignFlexProps['alignItems']The align-items value (for main axis alignment)
directionFlexProps['flexDirection']The flex-direction value
Edit this page

Made byChakraandRock Content