yoga/website/docs/styling/flex-wrap.mdx

---
sidebar_position: 7
---

import Playground from '@site/src/components/Playground';

# Flex Wrap

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](/docs/styling/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>`} />