> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Align Content

> Use the shipped `content-*` utilities to distribute wrapped flex lines on the cross axis.

export const ContentStartDemo = () => {
  const blockStyle = {
    background: "#0f766e",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.5rem 0.75rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    minHeight: "2.75rem",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flex: "0 1 calc((100% - 2rem) / 3)",
    boxSizing: "border-box",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.content-start</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    flexWrap: "wrap",
    alignItems: "flex-start",
    alignContent: "flex-start",
    gap: "1rem",
    minHeight: "30rem",
    width: "100%"
  }}>
          {Array.from({
    length: 10
  }, (_, i) => <div key={i} style={blockStyle}>{String(i + 1).padStart(2, "0")}</div>)}
        </div>
      </div>
    </div>;
};

export const ContentCenterDemo = () => {
  const blockStyle = {
    background: "#0f766e",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.5rem 0.75rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    minHeight: "2.75rem",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flex: "0 1 calc((100% - 2rem) / 3)",
    boxSizing: "border-box",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.content-center</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    flexWrap: "wrap",
    alignItems: "flex-start",
    alignContent: "center",
    gap: "1rem",
    minHeight: "30rem",
    width: "100%"
  }}>
          {Array.from({
    length: 10
  }, (_, i) => <div key={i} style={blockStyle}>{String(i + 1).padStart(2, "0")}</div>)}
        </div>
      </div>
    </div>;
};

export const ContentEndDemo = () => {
  const blockStyle = {
    background: "#0f766e",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.5rem 0.75rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    minHeight: "2.75rem",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flex: "0 1 calc((100% - 2rem) / 3)",
    boxSizing: "border-box",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.content-end</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    flexWrap: "wrap",
    alignItems: "flex-start",
    alignContent: "flex-end",
    gap: "1rem",
    minHeight: "30rem",
    width: "100%"
  }}>
          {Array.from({
    length: 10
  }, (_, i) => <div key={i} style={blockStyle}>{String(i + 1).padStart(2, "0")}</div>)}
        </div>
      </div>
    </div>;
};

export const ContentBetweenDemo = () => {
  const blockStyle = {
    background: "#0f766e",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.5rem 0.75rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    minHeight: "2.75rem",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flex: "0 1 calc((100% - 2rem) / 3)",
    boxSizing: "border-box",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.content-between</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    flexWrap: "wrap",
    alignItems: "flex-start",
    alignContent: "space-between",
    gap: "1rem",
    minHeight: "30rem",
    width: "100%"
  }}>
          {Array.from({
    length: 10
  }, (_, i) => <div key={i} style={blockStyle}>{String(i + 1).padStart(2, "0")}</div>)}
        </div>
      </div>
    </div>;
};

export const ContentAroundDemo = () => {
  const blockStyle = {
    background: "#0f766e",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.5rem 0.75rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    minHeight: "2.75rem",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flex: "0 1 calc((100% - 2rem) / 3)",
    boxSizing: "border-box",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.content-around</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    flexWrap: "wrap",
    alignItems: "flex-start",
    alignContent: "space-around",
    gap: "1rem",
    minHeight: "30rem",
    width: "100%"
  }}>
          {Array.from({
    length: 10
  }, (_, i) => <div key={i} style={blockStyle}>{String(i + 1).padStart(2, "0")}</div>)}
        </div>
      </div>
    </div>;
};

export const ContentEvenlyDemo = () => {
  const blockStyle = {
    background: "#0f766e",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.5rem 0.75rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    minHeight: "2.75rem",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flex: "0 1 calc((100% - 2rem) / 3)",
    boxSizing: "border-box",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.content-evenly</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    flexWrap: "wrap",
    alignItems: "flex-start",
    alignContent: "space-evenly",
    gap: "1rem",
    minHeight: "30rem",
    width: "100%"
  }}>
          {Array.from({
    length: 10
  }, (_, i) => <div key={i} style={blockStyle}>{String(i + 1).padStart(2, "0")}</div>)}
        </div>
      </div>
    </div>;
};

## Overview

Align content utilities control how wrapped flex lines are distributed along the cross axis. They only take effect when the container has multiple lines, so always pair them with `.flex-wrap`.

| Class              | CSS                             |
| ------------------ | ------------------------------- |
| `.content-start`   | `align-content: flex-start;`    |
| `.content-center`  | `align-content: center;`        |
| `.content-end`     | `align-content: flex-end;`      |
| `.content-between` | `align-content: space-between;` |
| `.content-around`  | `align-content: space-around;`  |
| `.content-evenly`  | `align-content: space-evenly;`  |

Responsive `content-*--on-*` variants are also shipped.

<Info>
  `align-content` only becomes visible when the container has multiple flex lines, so pair it with `.flex-wrap`.
</Info>

## Start

`.content-start` packs all wrapped lines toward the top of the container.

<ContentStartDemo />

```html theme={null}
<!-- Three items at half width → two flex lines so content-* applies -->
<div class="elementor-element flex flex-wrap items-start content-start gap-4" style="min-height: 30rem;">
  <div class="width-1-2 card padding-4">01</div>
  <div class="width-1-2 card padding-4">02</div>
  <div class="width-1-2 card padding-4">03</div>
</div>
```

## Center

`.content-center` groups all wrapped lines in the vertical center of the container.

<ContentCenterDemo />

```html theme={null}
<div class="elementor-element flex flex-wrap items-start content-center gap-4" style="min-height: 30rem;">
  <div class="width-1-2 card padding-4">01</div>
  <div class="width-1-2 card padding-4">02</div>
  <div class="width-1-2 card padding-4">03</div>
</div>
```

## End

`.content-end` packs all wrapped lines toward the bottom of the container.

<ContentEndDemo />

```html theme={null}
<div class="elementor-element flex flex-wrap items-start content-end gap-4" style="min-height: 30rem;">
  <div class="width-1-2 card padding-4">01</div>
  <div class="width-1-2 card padding-4">02</div>
  <div class="width-1-2 card padding-4">03</div>
</div>
```

## Between

`.content-between` places the first row at the top and the last row at the bottom, with equal space between the rest.

<ContentBetweenDemo />

```html theme={null}
<div class="elementor-element flex flex-wrap items-start content-between gap-4" style="min-height: 30rem;">
  <div class="width-1-2 card padding-4">01</div>
  <div class="width-1-2 card padding-4">02</div>
  <div class="width-1-2 card padding-4">03</div>
</div>
```

## Around

`.content-around` distributes equal space around each row of items.

<ContentAroundDemo />

```html theme={null}
<div class="elementor-element flex flex-wrap items-start content-around gap-4" style="min-height: 30rem;">
  <div class="width-1-2 card padding-4">01</div>
  <div class="width-1-2 card padding-4">02</div>
  <div class="width-1-2 card padding-4">03</div>
</div>
```

## Evenly

`.content-evenly` distributes perfectly equal space between all rows and the container edges.

<ContentEvenlyDemo />

```html theme={null}
<div class="elementor-element flex flex-wrap items-start content-evenly gap-4" style="min-height: 30rem;">
  <div class="width-1-2 card padding-4">01</div>
  <div class="width-1-2 card padding-4">02</div>
  <div class="width-1-2 card padding-4">03</div>
</div>
```

## Related Utilities

<CardGroup cols={2}>
  <Card title="Flex Wrap" href="/flexbox/wrap">
    Enable multiple rows before aligning them
  </Card>

  <Card title="Align Items" href="/flexbox/align-items">
    Control item alignment inside each row
  </Card>
</CardGroup>