Flexbox：对齐内容：flex-end答案

【问题标题】：Flexbox: Justify content: flex-endFlexbox：对齐内容：flex-end
【发布时间】：2013-08-08 02:03:26
【问题描述】：

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

提前感谢您的回复。

代码sn-p： 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;
}

【问题讨论】：

你明白列方向使弹性项目垂直堆叠，对吧？以这种方式使您的元素向右浮动是不可能的。您选择 Flexbox 而不是更传统的方法（如浮动）有什么特别的原因吗？现在，它看起来像 XY Problem

标签： html flexbox justify

【解决方案1】：

将 'display:block' 更改为 'display:-webkit-flex' 将两个面板移到容器内的右侧。

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

演示：http://jsfiddle.net/JWNmZ/

【讨论】：