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: 5vh 5% 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>

我还建议您不要像在此示例中那样使用负边距，我建议您执行类似这样的操作，而不是在flex项目中使用margin而不是

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

.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

应用于弹性项目时，％的上下边距不能始终如一（spec）。我用px代替

在chrome和safari中正常工作时Flex无法在firefox中工作

2 个答案: