CSS flexbox 在 FireFox（不是 Chrome）中包装内容答案

【问题标题】：CSS flexbox wraps content in FireFox (not Chrome)CSS flexbox 在 FireFox（不是 Chrome）中包装内容
【发布时间】：2015-09-07 20:44:19
【问题描述】：

我有一个button，它由一个<i> 和一个<span> 元素（一个图标和一些文本）组成。现在两者都有不同的大小，所以我在按钮上应用了一个弹性框，它应该很好地居中我的项目。在 Chrome 中，一切都按我的预期工作，但在当前 FF 中使用页面会导致我包装按钮的内部内容。该图标通过:before 伪元素显示。

JSFiddle

谁错了？是 FF 还是 Chrome（和我）。我应该怎么做才能在任一浏览器中获得相同的结果（文本前的图标，垂直居中，不换行）？

【问题讨论】：

这和stackoverflow.com/questions/27597870/… 是同一个问题——看我的回答：stackoverflow.com/a/27627318/329541 基本上，如果你想让一个按钮成为一个弹性容器，你最好的选择是添加一个包装器——
在按钮内部，并将 that div 样式设置为 display:flex.

标签： css google-chrome firefox flexbox pseudo-element

【解决方案1】：

很奇怪。 button 元素有一些特殊的行为，似乎与 flexbox 冲突。

具体来说，根据spec：

flex item 的display 值为blockified：如果元素的流入子元素的指定display 生成 flex container 是一个内联级值，它计算到它的块级等价物。

因此，i 和 span，即 inline，变为 blocks。

然而，弹性属性似乎既不适用于弹性容器button，也不适用于弹性项目i和span。

因此弹性项目是根据块格式化上下文而不是弹性项目显示的，并且由于它们是blocks，它们出现在不同的行。

修复它的一种方法是将内容包装在容器中，并使其成为 flex 容器，而不是按钮本身。

div {
  display: flex;
  align-items: center;
}
i {
  width: 12px;
  text-align: center;
  font-size: 22px;
}
i:before {
  content: "\2193";
}
span {
  font-size: 16px;
  margin-right: 10px;
}

<button>
  <div>
    <i></i>
    <span>Text</span>
  </div>
</button>

还可以考虑简化标记。

span {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-right: 10px;
}
span:before {
  content: "\2193";
  width: 12px;
  text-align: center;
  font-size: 22px;
}

<button>
  <span>Text</span>
</button>

【讨论】：

谢谢。我考虑过将i 和span 包装成div，它可能会正常工作。无论如何，我找到了一种不为此使用 flexbox 的方法。我只是给按钮一个display: table; 和孩子display: table-cell; vertical-align: middle; 这很好用。仅供参考：我正在为我的图标使用 FontAwesome 库，所以我必须使用 i 元素:)

【解决方案2】：

您需要指定display: -moz-box; 才能在FF 上工作。检查更新的Fiddle。

【讨论】：

嗨。我正在使用 Sass 和一个应该评估为 -moz-box（或 -webkit-flex，...）的 mixin，但我的 FF 只使用 flex。看看这个同时使用这两者的小提琴（就像我的 mixin 一样）：jsfiddle.net/u5xp3bd8/3 问题仍然存在，因为 FF 选择了flex 而不是-moz-box。顺便说一句，当使用 -moz-box 显式时它工作正常。
更改顺序使-moz-box赢：display: flex; display: -moz-box;
那行得通。但是我总是看到在所有后备之后应该使用标准属性作为最后一个？！
是的。但FF不一样。只要我玩css，FF总是把我打败，强迫我做trick，trick，trick。 :D
display:-moz-box 这里实际上没有任何效果——它所做的只是抑制 display:flex （及其阻塞怪癖）；它实际上并没有给你一个 flexbox。建议的 display:flex;display:-moz-box 最终表现为（在 Firefox 中），因为 display 根本没有设置。如果您实际上希望按钮成为一个弹性框，则需要将其内容包装在一个 wrapper-div 中并提供那个 display:flex;flex-flow:...;align-items:...;。如上所述，这与stackoverflow.com/questions/27597870/… 的问题相同

【解决方案3】：

申请flex-shrink: 0为我解决了这个问题

【讨论】：