align-self: per-child override

Override cross-axis alignment for ONE child

.container {
  display: flex;
  align-items: center;       /* default for all children */
}
.special {
  align-self: flex-start;    /* THIS child aligns to top instead */
}

align-self lets one child opt out of the container's align-items and pick its own cross-axis alignment.

Common use: a tooltip pinned to the top

<div class="row">
  <div>Card body</div>
  <div>Card body</div>
  <div class="badge">New</div>     <!-- floats to top of the row -->
</div>

.row { display: flex; align-items: center; gap: 12px; }
.badge { align-self: flex-start; }

No justify-self in flexbox

Note: there's no justify-self in flexbox (main-axis self-alignment per child). Use margin-left: auto for that effect:

.right-aligned { margin-left: auto; }

The auto margin absorbs all available space on that side, pushing the element to the end of the row. Common pattern for "logout button on the right" in nav bars.

Grid has both

Grid has both align-self AND justify-self — more uniform. We'll see this in B3.