align-self & order

align-self

Overrides the container's align-items for a specific item. Same values as align-items: flex-start, center, flex-end, stretch.

order

Changes the visual order of flex items without touching the HTML. Default is 0. Lower numbers come first. Negative values allowed.

⚠️ Changing visual order with order can confuse screen readers — use carefully.

Example

.container {
  display: flex;
  align-items: flex-start; /* default for all */
  height: 200px;
  gap: 16px;
}

.item-1 { align-self: flex-start; }
.item-2 { align-self: center; }
.item-3 { align-self: flex-end; }
.item-4 { align-self: stretch; }

/* Reorder items */
.first  { order: -1; }
.last   { order: 99; }

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned