html - Flexbox：对齐内容：flex-end

Question

我在使用 flexbox 实现对齐内容时遇到问题。我希望我的语言和社交媒体栏在 flex 容器中浮动。我使用的是 chrome，所以我的代码片段中有 -webkit 前缀。我究竟做错了什么？根据 W3C 规范和 Chrome 开发工具，我的方法应该是正确的，但也许我错了。

提前感谢您的回复。

代码片段：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/