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代替