使用 display: flex 时 span 元素的宽度不会增加；

Question

我想将容器中的跨度元素居中 div。跨度元素前面有另一个 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 将剩余的 space 用于父容器？

Answer 1

你正在使用 display: flex; 作为父元素，所以 span 作为一个内联元素，使用 flex: 1; 这对于像

这样的弹性项目来说只是增长

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

Demo（之前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

使用 display: flex 时 span 元素的宽度不会增加；

span element doesn't increase in width when using display: flex;

html

css

flexbox