How can I align one flex item differently from the rest?

Keep the shared setting on the flex container and override it on the one item. In your row layout, the cross axis runs vertically, so flex-end places that selected item at the bottom of the cross axis. [S1]

.toolbar {
  display: flex;
  align-items: center;
}

.toolbar__special {
  align-self: flex-end;
}

<div class="toolbar">
  <button>Save</button>
  <button class="toolbar__special">More options</button>
  <button>Help</button>
</div>

The two buttons without the special class keep the container’s centered alignment; the button with it uses its own alignment. This assumes the container is a flex container and the selected button is one of its flex items.

The main axis follows the flex direction, and the cross axis is perpendicular to it. In your row layout, the cross axis is vertical, so flex-end aligns the item at the cross-axis end. If the container uses flex-direction: column, the cross axis runs horizontally instead. Its orientation changes when the flex direction changes. [S1]

So check the container’s flex-direction, then choose an align-self value for the cross-axis alignment you want. align-self controls cross-axis alignment, not alignment along the main axis.

Yes. In a column layout, the cross axis is horizontal, so align-self: flex-end aligns the selected item at the cross-axis end. [S1]

.card-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-list__last {
  align-self: flex-end;
}

<div class="card-list">
  <div>First card</div>
  <div>Second card</div>
  <div class="card-list__last">Last card</div>
</div>

The first two items use the container’s shared flex-start alignment, and the last item overrides it. The example shows alignment at the cross-axis end; the exact side that represents that end can depend on the layout’s direction.

Check that the element is a flex item inside the flex container, that the rule targets that element, and that you are judging its position on the cross axis. align-self applies to flex items, not ordinary block-level boxes. Also check for an automatic margin on the cross axis: when the item has one, align-self is ignored. [S1]

A reusable pattern is:

1. Set display: flex on the parent.
2. Set the shared align-items value on that parent.
3. Add align-self only to the item that should differ.
4. Identify the cross axis from flex-direction before choosing flex-start, center, or flex-end.
5. If there is no visible change, check whether the item has an automatic cross-axis margin.

These checks cover common reasons the override may not produce the expected alignment; they do not diagnose unrelated layout rules in your page.