--- id: wrap category: layout title: Wrap package: '@chakra-ui/layout' description: "Wrap is a layout component used to add space between elements and wraps automatically if there isn't enough space." --- ## Import ```js import { Wrap, WrapItem } from '@chakra-ui/react' ``` - **Wrap**: Wrap composes the `Box` component and renders a `

` tag ## Usage Think of `Wrap` component as a flex box container with `flex-wrap` and `spacing` support. It works really well with things like dialog buttons, tags, and chips. In the example below, you see that the last `Box` wrapped to the next line. ```jsx Box 1 Box 2 Box 3 Box 4 ``` ### Change the spacing Pass the `spacing` prop to apply consistent spacing between each child, even if it wraps. > Pro Tip: You can pass responsive values for the spacing. ```jsx Box 1 Box 2 Box 3 Box 4 Box 5 ``` ### Change the alignment Pass the `align` prop to change the alignment of the child along the cross axis. ```jsx Box 1 Box 2 Box 3 Box 4 Box 5 ``` Pass the `justify` prop to change the alignment of the child along the main axis. ```jsx Box 1 Box 2 Box 3 Box 4 Box 5 ```