Flex 在 chrome 和 safari 中正常工作时无法在 Firefox 中工作 [重复]答案

【问题标题】：Flex not working in firefox while working correctly in chrome and safari [duplicate]Flex 在 chrome 和 safari 中正常工作时无法在 Firefox 中工作 [重复]
【发布时间】：2017-12-11 12:02:47
【问题描述】：

我目前正在学习 flex CSS 属性，我正在使用它来显示一堆 div，每行最多四个。这是它的 HTML 和 CSS：

.outer {
  display: flex;
  flex-wrap: wrap;
  margin: -5% -5% 0 -5%;
}

.step {
  text-align: center;
  display: inline-block;
  border: 2px solid black;
  margin: 5% 5% 0 5%;
  flex-grow: 1;
  height: 100px;
  width: 13%;
  overflow: auto;
}

.child {
  font-size: 1.25em;
}

<div class="outer" id="container">
  <div class='step' id=step0>
    <p class='child'> 1</p>
  </div>
  <div class='step' id=step1>
    <p class='child'> 2</p>
  </div>
  <div class='step' id=step2>
    <p class='child'>3</p>
  </div>
  <div class='step' id=step3>
    <p class='child'> 4</p>
  </div>
  <div class='step error' id=step7>
    <p class='child'>8</p>
  </div>
  <div class='step' id=step6>
    <p class='child'>7</p>
  </div>
  <div class='step' id=step5>
    <p class='child'>6</p>
  </div>
  <div class='step' id=step4>
    <p class='child'>5</p>
  </div>
  <div class='step' id=step8>
    <p class='child'>9</p>
  </div>
  <div class='step' id=step9>
    <p class='child'>10</p>
  </div>
</div>

css 的工作方式与我希望它在 Chrome 中的工作方式完全一致，但在 Firefox 中，不同行之间的垂直间隙为零，而在 Chrome 中则不然。我究竟做错了什么？（我也做了一个小提琴，https://jsfiddle.net/vLmnq7fL/2/。在 Chrome 和 firefox 中打开看看有什么不同）

【问题讨论】：

我会像在这里那样做：jsfiddle.net/vLmnq7fL/8。但是@LGSon 的回答几乎抓住了我要回答的本质。我只是为每个 step 使用了一个额外的包装器。

标签： html css firefox flexbox

【解决方案1】：

在弹性项目上使用百分比作为填充和边距可能会在不同浏览器上呈现不同的输出，因为规范允许它们。

此外，当您在margin:5%5% 0 5%; 中使用百分比作为顶部值时，将基于父级的宽度，而不是高度，也会产生不可预测的结果。

如果您使用视口单位，则不会margin:5vh5% 0 5%;

.outer {
  display: flex;
  flex-wrap: wrap;
  margin: -5vh -5% 0 -5%;
}

.step {
  text-align: center;
  display: inline-block;
  border: 2px solid black;
  margin: 5vh 5% 0 5%;
  flex-grow: 1;
  height: 100px;
  width: 13%;
  overflow: auto;
}

.child {
  font-size: 1.25em;
}

<div class="outer" id="container">
  <div class='step' id=step0>
    <p class='child'> 1</p>
  </div>
  <div class='step' id=step1>
    <p class='child'> 2</p>
  </div>
  <div class='step' id=step2>
    <p class='child'>3</p>
  </div>
  <div class='step' id=step3>
    <p class='child'> 4</p>
  </div>
  <div class='step error' id=step7>
    <p class='child'>8</p>
  </div>
  <div class='step' id=step6>
    <p class='child'>7</p>
  </div>
  <div class='step' id=step5>
    <p class='child'>6</p>
  </div>
  <div class='step' id=step4>
    <p class='child'>5</p>
  </div>
  <div class='step' id=step8>
    <p class='child'>9</p>
  </div>
  <div class='step' id=step9>
    <p class='child'>10</p>
  </div>

我还建议不要像在此示例中那样使用负边距，我建议您改为这样做，在弹性项目子项上使用边距

我还在所有边距上使用视口单位而不是百分比。

.outer {
  display: flex;
  flex-wrap: wrap;
}

.step {
  text-align: center;
  height: 100px;
  flex-grow: 1;
  flex-basis: 25%;
  overflow: auto;
}

.child {
  border: 2px solid black;
  margin: 5vh 5vw 0 5vw;
  height: calc(100% - 5vh);
  font-size: 1.25em;
  box-sizing: border-box;
}

<div class="outer" id="container">
  <div class='step' id=step0>
    <p class='child'> 1</p>
  </div>
  <div class='step' id=step1>
    <p class='child'> 2</p>
  </div>
  <div class='step' id=step2>
    <p class='child'>3</p>
  </div>
  <div class='step' id=step3>
    <p class='child'> 4</p>
  </div>
  <div class='step error' id=step7>
    <p class='child'>8</p>
  </div>
  <div class='step' id=step6>
    <p class='child'>7</p>
  </div>
  <div class='step' id=step5>
    <p class='child'>6</p>
  </div>
  <div class='step' id=step4>
    <p class='child'>5</p>
  </div>
  <div class='step' id=step8>
    <p class='child'>9</p>
  </div>
  <div class='step' id=step9>
    <p class='child'>10</p>
  </div>

【讨论】：

嗨！你能解释一下为什么使用负边距是个坏主意吗？
@stick 并不是说这是一个坏主意，负边距可能非常有用，有时是使某些事情起作用的唯一解决方案。我的意思是，如果不需要，不要使用它。我基于简单的逻辑；如果您将它作为一种整体技术使用并突然遇到一个问题，它是唯一的方法，那么它可能不会像您已经使用它那样发挥它的魔力。

【解决方案2】：

应用于弹性项目时，以 % 表示的顶部和底部边距不一致 (spec)。我用 px 代替

【讨论】：