什么可能导致Flex容器行之间的空间？

Question

什么可能导致Flex容器行之间的空间？

我已删除了dev项目的链接，因为答案是不言自明的，第一行中的一个项目设置了很高的高度。

之间存在很大差距

*）包含div.hlang，div.headerstamp.stampcont，div.pckHeader，svg#coatArmCyprus

的上一行

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

什么可能导致差距？因为我将body.cont中的所有这些项对齐，这是带有flex-direction: row的弹性容器; 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

从height: 30vw;规则

中删除div.hlang

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