使用display时，span元素的宽度不会增加：flex;

Question

我想将span元素置于容器div的中心。 span-element前面是另一个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/ 是否有宽度：auto;让div b占用父容器的剩余空间？

Answer 1

您正在使用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;

Answer 2

如果您知道只有两个元素获得整个宽度，即一个div width:70%，那么您可以轻松地将剩余的width:30%提供给span，就像这样

#b {
    text-align:center;
    width:30%;
}

Js Fiddle Demo