html - 什么会导致 flex 容器行之间出现空格？

Question

什么会导致 flex 容器行之间出现空格？

我删除了开发元素的链接，因为答案是不言自明的，第一行的一个元素设置了非常高的高度。

差距很大

*) 上一行包含div.hlang、div.headerstamp.stampcont、div.pckHeader、svg#coatArmCyprus

*) 和下一行，包含三个不同内容的div.pck(长列)。

什么会导致差距？因为我在 body.cont 中对齐了所有这些元素，这是一个带有 flex-direction: row 的 flex 容器； justify-content: flex-start; align-content: flex-start; align-items: flex-start;

所有这些元素都包裹在 body.cont 中

   body.cont {
        box-sizing: border-box; 
        width: 100%; 
        position : relative; //normally nody is static
        display: flex; /* container */
        flex-direction: row;
        flex-wrap: wrap; /* nowrap | wrap | wrap-reverse; */
        justify-content: flex-start; /* main axia : flex-start | flex-end | center | space-between | space-around | space-evenly; */
        align-items: flex-start; /* cross axis: flex-start | flex-end | center | baseline | stretch; */
        align-content: flex-start; /* all c
                                   ontainer lines : flex-start | flex-end | center | space-between | space-around | stretch; */
        margin:0; border:0; padding: 0 $bodyPadR 0 $bodyPadL; 
    }



.pck {
    box-sizing: border-box; 
    display: flex; /* container */
    flex-direction: column;
    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse; */
    justify-content: space-around; /* flex-start | flex-end | center | space-between | space-around | space-evenly; */
    align-items: flex-start; /* cross axis: flex-start | flex-end | center | baseline | stretch; */
    align-content: flex-start; /* all container lines : flex-start | flex-end | center | space-between | space-around | stretch; */
    border:0; margin:0; padding:0;
    width:$colw; 
}

Answer 1

从 div.hlang 规则中移除 height: 30vw;

---

作为提示，如果您右键单击您的页面然后选择“检查”，您可以将鼠标悬停在 html 上并查看每个元素在页面中的呈现方式。