Align Content

Align content defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using flex wrap.

Flex start (default): Align wrapped lines to the start of the container's cross axis.

Flex end: Align wrapped lines to the end of the container's cross axis.

Stretch: Stretch wrapped lines to match the height of the container's cross axis.

Center: Align wrapped lines in the center of the container's cross axis.

Space between: Evenly space wrapped lines across the container's main axis, distributing remaining space between the lines.

Space around: Evenly space wrapped lines across the container's main axis, distributing remaining space around the lines. Compared to space between using space around will result in space being distributed to the begining of the first lines and end of the last line.

<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 250,
      height: 250,
      padding: 10,
      alignContent: 'flex-start',
      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>