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

I want to center a span-element in an container div. The span-element is preceeded by another div.

我想将span-element置于容器div中。 span-element前面是另一个div。

here is my code:

这是我的代码：

<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;
}

and on jsfiddle: http://jsfiddle.net/pbek7av3/1/

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

I tried it with text-align:center and margin:auto, but sadly this doesn't work.

我尝试使用text-align：center和margin：auto，但遗憾的是这不起作用。

edit: This would be another approach: http://jsfiddle.net/pbek7av3/2/ Is there something like width:auto; to let div b take the remaining space fo the parent container?

编辑：这将是另一种方法：http：//jsfiddle.net/pbek7av3/2/是否有类似width：auto;让div b占用父容器的剩余空间？

2 个解决方案

#1

You are using display: flex; for the parent, so span being an inline element, use flex: 1; which is nothing but grow for the flex item like

您正在使用display：flex;对于父级，所以span是一个内联元素，使用flex：1;这只是为flex项目增长而已

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

Demo (Missed out the declaration in previous demo #3 so updated again)

演示（错过了先前演示＃3中的声明，因此再次更新）

Note that flex is not supported in older versions of IE as well as other popular browsers so if you are interested in the browser support than take a look at CanIUse : Flexbox for more details.

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

---

Test case without flex: 1; or flex-grow: 1;

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

With flex: 1; or flex-grow: 1;

随flex：1;或flex-grow：1;

#2

If you know that there are only two element which is getting entire width i.e. one your div width:70%, then you can easily give the remaining width:30% to the span like this

如果您知道只有两个元素可以获得整个宽度，即一个div宽度：70％，那么您可以轻松地给出剩余宽度：30％到这样的跨度

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

Js Fiddle Demo

Js Fiddle演示