html - 使用display时，span元素的宽度不会增加。

我想将span元素居中放在容器div中。 span元素位于另一个div之前。

这是我的代码：

<div id="container">
    <div id="a">A</div>
    <span id="b">B</span>
</div>

#container {
    display:flex;

    background-color:#0AA;
    text-align:center;
}

#a {
    width:70%;
    background-color:#AA0;
}

并在jsfiddle上：
http://jsfiddle.net/pbek7av3/1/

我用text-align：center和margin：auto尝试过，但是可惜这不起作用。

编辑：
这将是另一种方法：http://jsfiddle.net/pbek7av3/2/
是否有宽度：自动；让div b占用父容器的剩余空间？

最佳答案

您将display: flex;用作父级，因此span是一个内联元素，请使用flex: 1;，除了增加弹性项目外

#b {
    flex: 1; /* Or flex-grow: 1; */
}

Demo（在上一个演示＃3中缺少声明，因此再次更新了）

请注意，较旧版本的IE以及其他流行的浏览器均不支持flex，因此，如果您对浏览器支持感兴趣，请查看CanIUse : Flexbox以获得更多详细信息。



没有flex: 1;或flex-grow: 1;的测试用例



使用flex: 1;或flex-grow: 1;

关于html - 使用display时，span元素的宽度不会增加。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29144083/