Wrap is a layout component that adds a defined space between its children and 'wraps' its children automatically if there's not enough space to fit any child.
You can see that the Box gets wrapped to the next line.
You can pass spacing prop to add consistent spacing between its child components.
You can pass shorthands for
align prop changes the alignment of the child along the main axis.
justify prop changes the alignment of the child along the cross axis.
In addition to this, all the Flex Props can be passed to
|spacing||string, number||The divider element to use between elements.||-|
|justify||justifyContent||The justifyContent value (for cross axis alignment).||-|
|align||alignItems||The alignItems value (for main axis alignment).||-|
|direction||flexDirection||The flexDirection value.||-|