---
sidebar_position: 1
---

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

# 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](/docs/styling/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](/docs/styling/width-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.

<Playground code={`<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>`} />
