website/docs/styling/flex-wrap.mdx
import Playground from '@site/src/components/Playground';
The flex wrap property is set on containers and controls what happens when children overflow the size of the container along the main axis. By default children are forced into a single line (which can shrink nodes). When wrapping lines align content can be used to specify how the lines are placed in the container.
No wrap (default): No wrapping and children might shrink as a result.
Wrap: Nodes are wrapped into multiple lines along the main axis if needed.
Wrap reverse: Behaves the same as wrap but the order of the lines is reversed.
<Playground code={<Layout config={{useWebDefaults: false}}> <Node style={{ width: 200, height: 250, padding: 10, flexWrap: 'wrap', }}> <Node style={{margin: 5, height: 50, width: 50}} /> <Node style={{margin: 5, height: 50, width: 50}} /> <Node style={{margin: 5, height: 50, width: 50}} /> <Node style={{margin: 5, height: 50, width: 50}} /> </Node> </Layout>} />