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 beginning of the first lines and end of the last line.

Space evenly: Evenly space wrapped lines across the container's main axis, distributing remaining space around the lines. Compared to space around, space evenly will not double the gaps between children. The size of gaps between children and between the parent's edges and the first/last child will all be equal.

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