Question

http://tsuts.tskoli.is/2t/2809984199/skapalon/＆lt; - 在此托管。

Classes Container和Projectskort是要查看的内容。

.container{
display: flex;
min-height: 100vh;
width: calc(100vw - 500px);
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
}  
.projectskort{
margin-top: 10px;
width: 224px;
height: 270px;
border-radius: 3px;
background-color: white;
}

任何帮助都很有帮助，谢谢。

Answer 1

这是由于align-content默认值为stretch，它将线条扩展到该部分的整个高度。您需要将其设置为flex-start

.container {
    display: flex;
    min-height: 100vh;
    width: calc(100vw - 500px);
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    align-content: flex-start;
}

Answer 2

您正在创建的边距正在创建，因为您的flex上有一个硬写入高度。

你强迫flex填充100vh，并且有2行内容，每个填充50％。

如果为第三行添加更多div，您将看到它们占据容器高度的33％。

要尝试复制您想要的内容，请从Flex容器中移除最小高度，将Flex容器放入最小高度为100vh的包装容器中。

Flex Wrap：将边距设置为低于div的行

2 个答案: