Why is flexbox code not working in Safari 5 and 6?

Safari versions prior to 6.1 support a previous version of the flexbox specification (source).

For Safari 5.0, 5.1 and 6.0, in addition to display: -webkit-box (which is the display: flex of that time), you need to use the -webkit-box-orient property.

This tells the flex container how to align its children.

The initial value is inline-axis. Try using vertical or horizontal.

This is the section in the spec with the details: https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#orientation

More details here: Flexbox code working on all browsers except Safari. Why?

Try adding margin: auto and see if that fixes things.

https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.sbo7eyw65