如何设置span标签宽度与内容一致（需保留display:flex）

问题根源：默认span是行内元素，设置display: flex后会被转为块级元素，块级元素默认占满父容器可用宽度，因此出现宽度过宽的情况。

要让span宽度完全贴合图标+文本的总宽度，只需将display: flex替换为display: inline-flex：

span {
  display: inline-flex; /* 替换原flex属性 */
  align-items: center;
  background: #ddd;
}

修改后的完整代码：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<span>
  <i class="fa fa-arrow-right"></i>
   My Text
</span>

inline-flex既保留了flex布局的特性，又让元素表现为行内块级元素，宽度由内部内容完全撑开，文本变长时span宽度也会自动适配扩展。

内容的提问来源于stack exchange，提问作者Devmix