CSS3 Flexbox fails in Webkit (Chrome and Safari)

Question

<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?

Answer 1

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.