Flex在Firefox和Chrome浏览器中正常工作时无法正常工作

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

顶部和底部％的利润率不工作始终（spec）时，适用于弯曲的物品。我使用px代替