yoga/website-next/docs/examples/align-content.mdx

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

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