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

<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>`} />
