Flexbox：证明内容：flex-end

Question

I have problems with implementing justify content using flexbox. I want my language and social media bar to be floating right in the flex container. I'm using chrome, so I have -webkit prefixes in my code snippet. What am I doing wrong? According to W3C spec and to Chrome Dev tools, my approach should be correct, but maybe I'm wrong.

Thanks in advance for your 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;
}

Answer 1

Changing 'display:block' to 'display:-webkit-flex' moves the two panels over to the right inside the container.

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

Demo: http://jsfiddle.net/JWNmZ/