Flex Wrap：在一行 div 下方换行 [关闭]答案

【问题标题】：Flex Wrap: Wrap making margins below a row of div's [closed]Flex Wrap：在一行 div 下方换行 [关闭]
【发布时间】：2016-07-25 11:39:50
【问题描述】：

http://tsuts.tskoli.is/2t/2809984199/skapalon/

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;
}

非常感谢任何帮助，谢谢。

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。虽然您提供了link to an example or site，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。

标签： html css flexbox

【解决方案1】：

正在创建您所指的边距，因为您的 flex 上面有硬写的高度。

您正在强制 flex 填充 100vh，并且有 2 行内容，每行填充 50%。

如果你为第三行添加更多的 div，你会看到它们都占据了容器高度的 33%。

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

【讨论】：

【解决方案2】：

这是由于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;
}

【讨论】：

现在工作。还没有完全掌握 flex 的窍门，谢谢！