html - Flexbox align-self being ignored

The documentation for align-self states:

The align-self CSS property aligns flex items of the current flex line overriding the align-items value.

However, this does not happen:

.example {
  display: flex;
  align-items: center;
  border: 1px solid blue;
  height: 8ex;
}


.example > div {
  border: 1px solid red;
}

#a > div:last-child {
  align-self: top;
}

#b > div:last-child {
  align-self: center;

}

#c > div:last-child {
  align-self: bottom;
}

1
2
1
2
1
2

The docs also say:

If any of the item's cross-axis margin is set to auto, then align-self is ignored. The property doesn't apply to block-level boxes, or to table cells.

However, none of these things work:

• Explicitly adding margin:0 to the child divs.


• Adding display:inline to the child divs.


• Changing the divs to spans.

Why is align-self not working?

Answer

top and bottom are not valid values for align-self. Use flex-start and flex-end instead:

.example {
  display: flex;
  align-items: center;
  border: 1px solid blue;
  height: 8ex;
}


.example > div {
  border: 1px solid red;
}

#a > div:last-child {
  align-self: flex-start;
}

#b > div:last-child {

  align-self: center;
}

#c > div:last-child {
  align-self: flex-end;
}

1
2
1
2
1
2