title: How do I make flex box work in safari?
body: <p>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.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav id="menu"&gt;
    &lt;a href="#"&gt;Philadelphia&lt;/a&gt;
    &lt;!--&lt;a href="#"&gt;Vacation Packages&lt;/a&gt;--&gt;
    &lt;a href="#"&gt;United States of America&lt;/a&gt;
    &lt;a href="#"&gt;Philippines&lt;/a&gt;
    &lt;a href="#"&gt;Long Destinations Names&lt;/a&gt;
    &lt;a href="#"&gt;Some Destination&lt;/a&gt;
    &lt;a href="#"&gt;Australia&lt;/a&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/cyberjo50/n55xh/3/" rel="noreferrer">http://jsfiddle.net/cyberjo50/n55xh/3/</a></p>
  
  <p>Is there a prefix I'm missing to make it work in Safari?</p>