Flex在Firefox中无法正常工作，而在chrome和safari中正常工作

Question

我目前正在学习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中打开以查看差异(

Answer 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>

Answer 2

% 的上边距和下边距在应用于弹性项目时不一致(规范(。我改用 px