html - 使用显示 : flex; 时 span 元素不会增加宽度

Question

我想在容器 div 中居中一个 span-element。 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/有没有像 width:auto; 这样的东西？让div b占用父容器的剩余空间？

Answer 1

您正在为父级使用 display: flex;，因此 span 是一个内联元素，请使用 flex: 1; 这没什么但会像

这样的 flex 元素增长

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

Demo (错过了之前演示#3 中的声明，所以再次更新)

请注意，旧版本的 IE 和其他流行的浏览器不支持 flex，因此如果您对浏览器支持感兴趣，请查看 CanIUse : Flexbox。了解更多详情。

---

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

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