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 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.

<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 250,
      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>