align-self

align-self is like align-items but align-self applys to an item while align-items applies to the container.

align-self is useful when you want to make an exception against align-items.

align-items:stretch

1
2
2
3
3
3
4
5
5
6
6
6

align-items:stretch + align-self=flex-start on the item 4

1
2
2
3
3
3
4
5
5
6
6
6

align-items:flex-start

1
2
2
3
3
3
4
5
5
6
6
6

align-items:flex-start + align-self=flex-end on the item 4

1
2
2
3
3
3
4
5
5
6
6
6

align-items:center

1
2
2
3
3
3
4
5
5
6
6
6

align-items:center + align-self=flex-end on the item 4

1
2
2
3
3
3
4
5
5
6
6
6