Align-self Exercise

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.