CSS align-self Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.example {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 20px;
}

.container {
  display: flex;
  height: 160px;
  gap: 12px;
  align-items: center; /* default cross-axis alignment */
  padding: 12px;
  border: 2px dashed #e0e0e0;
  background: #fafafa;
}

.item {
  padding: 12px 16px;
  min-width: 80px;
  background: #4a90e2;
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.align-start {
  align-self: flex-start;
  background: #7b61ff;
}

.align-center {
  align-self: center;
  background: #4a90e2;
}

.align-end {
  align-self: flex-end;
  background: #e94e77;
}

.align-stretch {
  align-self: stretch;
  background: #50e3c2;
}
</style></head><body><div class="example">
  <h2>align-self demo</h2>
  <div class="container">
    <div class="item">Default</div>
    <div class="item align-start">flex-start</div>
    <div class="item align-center">center</div>
    <div class="item align-end">flex-end</div>
    <div class="item align-stretch">stretch</div>
  </div>
</div></body></html>