order and align-self Properties

An orderly apocalypse

order: It is used on individual flexed elements. It sets or changes the order of those items in the flexed layout. It’s important to know that if order has not been set, order defaults to 0. The lowest order number appears in the leftmost/topmost position, depending on flex-direction. If items have the same order numbers, they go in source order.

Note: This does not change the source order and can thus hurt accessibility if reordering causes confusion.

.zombie-item {
    order: 1;
}

Experiments to try:

1. What happens when you change the flex-direction?
2. What happens if you use a negative number?
3. Add an order: 3 to the z1 class. What happens?