Safe versus unsafe alignments

A

BB
BB

CCC
CCC
CCC

DDDD
DDDD
DDDD
DDDD

EEEEE
EEEEE
EEEEE
EEEEE
EEEEE

FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF

align-items: center

A

BB
BB

CCC
CCC
CCC

DDDD
DDDD
DDDD
DDDD

EEEEE
EEEEE
EEEEE
EEEEE
EEEEE

FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF

align-items: safe center

A

BB
BB

CCC
CCC
CCC

DDDD
DDDD
DDDD
DDDD

EEEEE
EEEEE
EEEEE
EEEEE
EEEEE

FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF

align-items: unsafe center

A

BB
BB

CCC
CCC
CCC

DDDD
DDDD
DDDD
DDDD

EEEEE
EEEEE
EEEEE
EEEEE
EEEEE

FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF

align-items: flex-end

A

BB
BB

CCC
CCC
CCC

DDDD
DDDD
DDDD
DDDD

EEEEE
EEEEE
EEEEE
EEEEE
EEEEE

FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF

align-items: safe flex-end

A

BB
BB

CCC
CCC
CCC

DDDD
DDDD
DDDD
DDDD

EEEEE
EEEEE
EEEEE
EEEEE
EEEEE

FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF

align-items: unsafe flex-end

A

BB
BB

CCC
CCC
CCC

DDDD
DDDD
DDDD
DDDD

EEEEE
EEEEE
EEEEE
EEEEE
EEEEE

FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF

align-items: stretch

A

BB
BB

CCC
CCC
CCC

DDDD
DDDD
DDDD
DDDD

EEEEE
EEEEE
EEEEE
EEEEE
EEEEE

FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF

align-items: safe stretch

A

BB
BB

CCC
CCC
CCC

DDDD
DDDD
DDDD
DDDD

EEEEE
EEEEE
EEEEE
EEEEE
EEEEE

FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF
FFFFFF

align-items: unsafe stretch