Align-self Exercise

This lesson is an exercise on how align-self overrides align-items in a flex container.

Exercise: Relationship between align-self and align-items

In the following exercise, try out all possible align-self settings on all Flex-items. Before entering a CSS rule, think about what you would expect to see and why.

If you prefer adding the align-self properties to one individual Flex item, then you can also use the following pre-defined CSS classes:

.as-flex-start {
    align-self: flex-start;

.as-flex-end {
    align-self: flex-end;

.as-center {
    align-self: center;

.as-baseline {
    align-self: baseline;

.as-stretch {
    align-self: stretch;

Simply add any of these classes in the HTML, and observe the results.

Take notes on your conclusions.

Get hands-on with 1200+ tech skills courses.