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

> Use the shipped `self-*` utilities to override alignment for one flex item.

export const SelfStartDemo = () => {
  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">.self-start</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    alignItems: "stretch",
    gap: "1rem",
    minHeight: "8rem"
  }}>
            <div style={blockStyle("#334155", "6rem")}>01</div>
            <div style={{
    ...blockStyle("#2563eb", "3rem"),
    alignSelf: "flex-start"
  }}>02</div>
            <div style={blockStyle("#0f766e", "6rem")}>03</div>
          </div>
        </div>
      </div>
    </div>;
};

export const SelfCenterDemo = () => {
  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">.self-center</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    alignItems: "stretch",
    gap: "1rem",
    minHeight: "8rem"
  }}>
            <div style={blockStyle("#334155", "6rem")}>01</div>
            <div style={{
    ...blockStyle("#2563eb", "3rem"),
    alignSelf: "center"
  }}>02</div>
            <div style={blockStyle("#0f766e", "6rem")}>03</div>
          </div>
        </div>
      </div>
    </div>;
};

export const SelfEndDemo = () => {
  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">.self-end</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    alignItems: "stretch",
    gap: "1rem",
    minHeight: "8rem"
  }}>
            <div style={blockStyle("#334155", "6rem")}>01</div>
            <div style={{
    ...blockStyle("#2563eb", "3rem"),
    alignSelf: "flex-end"
  }}>02</div>
            <div style={blockStyle("#0f766e", "6rem")}>03</div>
          </div>
        </div>
      </div>
    </div>;
};

## Overview

Align self utilities let you override the container's `items-*` rule for a single child. Use them when one item needs a different vertical position than the rest of the row.

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

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

## Self Start

`.self-start` pulls one item to the top of the cross axis while the rest of the row stays stretched or follows the container rule.

<SelfStartDemo />

```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 self-start">
    02
  </div>
  <div class="card padding-4">
    03
  </div>
</div>
```

## Self Center

`.self-center` vertically centers one item within the row while siblings follow the container alignment.

<SelfCenterDemo />

```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 self-center">
    02
  </div>
  <div class="card padding-4">
    03
  </div>
</div>
```

## Self End

`.self-end` pushes one item to the bottom of the cross axis. This is useful for anchoring a specific element to the baseline of the container.

<SelfEndDemo />

```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 self-end">
    02
  </div>
  <div class="card padding-4">
    03
  </div>
</div>
```

## Best Practices

* Keep `self-*` for targeted exceptions instead of setting the whole line differently.
* Use it on one item that needs a different visual anchor within the row.
* Keep the base container rule predictable with `items-*`, then layer `self-*` only where needed.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Align Items" href="/flexbox/align-items">
    Set the shared cross-axis rule for the container
  </Card>

  <Card title="Order" href="/flexbox/order">
    Reorder items when alignment alone is not enough
  </Card>
</CardGroup>