Question

我在使用flexbox实现对齐内容时遇到问题。我希望我的语言和社交媒体栏能够直接浮动在Flex容器中。我正在使用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/

Flexbox：对齐内容：flex-end

1 个答案: