html - Flexbox: Justify content: flex-end -

i have problems implementing justify content using flexbox. want language , social media bar floating right in flex container. i'm using chrome, have -webkit prefixes in code snippet. doing wrong? according w3c spec , chrome dev tools, approach should correct, maybe i'm wrong.

thanks in advance replies.

code snippet: html:

<div id="upbar">         <div id="languagepanel">             <ul>                 <li><a href="#">eng</a></li>                 <li><a href="#">ger</a></li>                 <li><a href="#">fr</a></li>             </ul>         </div>         <div id="media">             <ul>                 <li><a href="#">fb</a></li>                 <li><a href="#">mail</a></li>             </ul>         </div>     </div> 

css:

#upbar{     display: -webkit-flex;     -webkit-flex-direction: column; }  #languagepanel, #media{ -webkit-justify-content: flex-end; display: block; } 

changing 'display:block' 'display:-webkit-flex' moves 2 panels on right inside container.

#languagepanel, #media {     -webkit-justify-content: flex-end;     display: -webkit-flex; } 

demo: http://jsfiddle.net/jwnmz/