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

【问题标题】：span element doesn't increase in width when using display: flex;使用 display: flex 时 span 元素的宽度不会增加；
【发布时间】：2015-03-19 20:28:46
【问题描述】：

我想在容器 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 占用父容器的剩余空间？

【问题讨论】：

你想如何居中，前面的 div 怎么样，你想用它做什么？
前面的 div 很好，我的目标是在容器 div 的剩余空间中居中跨度（“B”）。

标签： html css flexbox

【解决方案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;

【讨论】：

【解决方案2】：

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

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

Js Fiddle Demo

【讨论】：