Flexbox: Обоснуйте содержание: flex-end

Question

У меня проблемы с реализацией выравнивания контента с помощью flexbox. Я хочу, чтобы мой язык и панель социальных сетей плавали прямо в гибком контейнере. Я использую Chrome, поэтому в моем фрагменте кода есть префиксы -webkit. Что я делаю неправильно? Согласно спецификации W3C и инструментам Chrome Dev, мой подход должен быть правильным, но, возможно, я ошибаюсь.

Заранее спасибо за ваши ответы.

фрагмент кода: 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

Изменение 'display:block' на 'display:-webkit-flex' перемещает две панели вправо внутри контейнера.

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

Демо: http://jsfiddle.net/JWNmZ/