> ## 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 Items

> Use the shipped `items-*` utilities to align every flex child along the cross axis.

export const ItemsStartDemo = () => {
  const blockStyle = (bg, h) => ({
    background: bg,
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    minHeight: h,
    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">.items-start</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    alignItems: "flex-start",
    gap: "1rem",
    minHeight: "8rem"
  }}>
            <div style={blockStyle("#2563eb", "3rem")}>01</div>
            <div style={blockStyle("#7c3aed", "4.5rem")}>02</div>
            <div style={blockStyle("#db2777", "6rem")}>03</div>
          </div>
        </div>
      </div>
    </div>;
};

export const ItemsCenterDemo = () => {
  const blockStyle = (bg, h) => ({
    background: bg,
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    minHeight: h,
    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">.items-center</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    alignItems: "center",
    gap: "1rem",
    minHeight: "8rem"
  }}>
            <div style={blockStyle("#2563eb", "3rem")}>01</div>
            <div style={blockStyle("#7c3aed", "4.5rem")}>02</div>
            <div style={blockStyle("#db2777", "6rem")}>03</div>
          </div>
        </div>
      </div>
    </div>;
};

export const ItemsEndDemo = () => {
  const blockStyle = (bg, h) => ({
    background: bg,
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    minHeight: h,
    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">.items-end</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    alignItems: "flex-end",
    gap: "1rem",
    minHeight: "8rem"
  }}>
            <div style={blockStyle("#2563eb", "3rem")}>01</div>
            <div style={blockStyle("#7c3aed", "4.5rem")}>02</div>
            <div style={blockStyle("#db2777", "6rem")}>03</div>
          </div>
        </div>
      </div>
    </div>;
};

export const ItemsStretchDemo = () => {
  const blockStyle = bg => ({
    background: bg,
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    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">.items-stretch</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    alignItems: "stretch",
    gap: "1rem",
    minHeight: "8rem"
  }}>
            <div style={blockStyle("#2563eb")}>01</div>
            <div style={blockStyle("#7c3aed")}>02</div>
            <div style={blockStyle("#db2777")}>03</div>
          </div>
        </div>
      </div>
    </div>;
};

## Overview

Align items utilities control where every child sits along the cross axis of the flex container. Use them to vertically align items in a row or horizontally align items in a column.

| Class            | CSS                        |
| ---------------- | -------------------------- |
| `.items-start`   | `align-items: flex-start;` |
| `.items-center`  | `align-items: center;`     |
| `.items-end`     | `align-items: flex-end;`   |
| `.items-stretch` | `align-items: stretch;`    |

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

## Start

`.items-start` aligns all children to the start of the cross axis. Items with different heights will share a common top edge.

<ItemsStartDemo />

```html theme={null}
<div class="elementor-element flex items-start gap-4" style="min-height: 6rem;">
  <div class="card padding-4">
    Short
  </div>
  <div class="card padding-6">
    Taller card
  </div>
  <div class="card padding-4">
    Short
  </div>
</div>
```

## Center

`.items-center` vertically centers all children within the container. This is the most common alignment for headers, navigation bars, and balanced rows.

<ItemsCenterDemo />

```html theme={null}
<div class="elementor-element flex items-center gap-4" style="min-height: 6rem;">
  <div class="card padding-4">
    Short
  </div>
  <div class="card padding-6">
    Taller card
  </div>
  <div class="card padding-4">
    Short
  </div>
</div>
```

## End

`.items-end` aligns all children to the end of the cross axis. Items share a common bottom edge.

<ItemsEndDemo />

```html theme={null}
<div class="elementor-element flex items-end gap-4" style="min-height: 6rem;">
  <div class="card padding-4">
    Short
  </div>
  <div class="card padding-6">
    Taller card
  </div>
  <div class="card padding-4">
    Short
  </div>
</div>
```

## Stretch

`.items-stretch` makes every child fill the full cross-axis height of the container. This is the default flex behavior and is useful when cards or columns should match heights.

<ItemsStretchDemo />

```html theme={null}
<div class="elementor-element flex items-stretch gap-4" style="min-height: 6rem;">
  <div class="card padding-4">
    01
  </div>
  <div class="card padding-4">
    02
  </div>
  <div class="card padding-4">
    03
  </div>
</div>
```

## Best Practices

* Use `items-center` for balanced rails, headers, and button rows.
* Use `items-stretch` when every child should fill the shared cross-axis height.
* Reach for `self-*` only when one child needs to break away from the group rule.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Align Self" href="/flexbox/align-self">
    Override one item without changing the whole row
  </Card>

  <Card title="Justify Content" href="/flexbox/justify-content">
    Pair cross-axis and main-axis alignment together
  </Card>
</CardGroup>