CSS3 Flexbox fails in Webkit (Chrome and Safari)

Problem

<nav>
 <div id="navbox" style="display: box; box-orient: horizontal;">
 <img src="../gfx/lg_logo.png"></img>
  <div>tagline</div>
  </div>
 </nav>

In Chrome's inspector, the flexbox properties for the div "navbox" is crossed out with the yellow warning icon next to it. Unfortunately, Google doesn't have any sort of tooltip or explanation for its yellow icons so I'm left guessing as to why its rejecting my display: box property. What is wrong here?

Problem courtesy of: zakdances

Solution

Try adding vendor prefixes.

<nav>
 <div id="navbox" style="display: -webkit-box; -webkit-box-orient: horizontal;">
 <img src="../gfx/lg_logo.png" />
  <div>tagline</div>
  </div>
 </nav>

BTW, img element doesn't have closing tag.

Solution courtesy of: duri

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.