How do I make flex box work in safari?

How do I make flex boxes work in Safari? I have a responsive nav that uses a CSS flex box to be responsive and for some reason it won’t work in Safari.

Here is my code:

#menu {
	clear: both;
	height: auto;
	font-family: Arial, Tahoma, Verdana;
	font-size: 1em;
	/*padding:10px;*/
	margin: 5px;
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
	justify-content: center;
	-webkit-box-align: center;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;fffff
	font-style: normal;
	font-weight: 400px;
}
#menu a:link {
	display: inline-block;
	width: 100px;
	height: 50px;
	padding: 5px;
	background-color: yellow;
	/*border: 1px solid #cccccc;*/
	margin: 5px;
	display: flex;
	flex-grow: 1;
	align-items: center;
	text-align: center;
	justify-content: center;
	font-weight: bold;
	color: #1689D6;
	font-size: 85%;
}
#menu a:visited {
	display: inline-block;
	width: 100px;
	height: 50px;
	padding: 5px;
	background-color: yellow;
	/*border: 1px solid #cccccc;*/
	margin: 5px;
	display: flex;
	flex-grow: 1;
	align-items: center;
	text-align: center;
	justify-content: center;
	font-weight: bold;
	color: #1689D6;
	font-size: 85%;
}
#menu a:hover {
	display: inline-block;
	color: #fff;
	width: 100px;
	height: 50px;
	padding: 5px;
	background-color: red;
	/*border: 1px solid #cccccc;*/
	margin: 5px;
	display: flex;
	flex-grow: 1;
	align-items: center;
	text-align: center;
	justify-content: center;
	font-weight: bold;
	font-size: 85%;
}
#menu a:active {
	display: inline-block;
	color: #fff;
	width: 100px;
	height: 50px;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 5px;
	background-color: red;
	/*border: 1px solid #cccccc;*/
	margin: 5px;
	display: flex;
	flex-grow: 1;
	align-items: center;
	text-align: center;
	justify-content: center;
	font-style: normal;
	font-weight: bold;
	font-size: 85%;
}

<nav id="menu">
  <a href="#">Philadelphia</a>
  <!--<a href="#">Vacation Packages</a>-->
  <a href="#">United States of America</a>
  <a href="#">Philippines</a>
  <a href="#">Long Destinations Names</a>
  <a href="#">Some Destination</a>
  <a href="#">Australia</a>
</nav>

Expand snippet

http://jsfiddle.net/cyberjo50/n55xh/3/

Is there a prefix I’m missing to make it work in Safari?