我在这两个地方引用了关于flexbox align-content的 Material ，stack overflow和 css-tricks .
我尝试放置三个不同颜色的水平条，高度为 100%，并且它们之间的间距相等。
对于 Flex 容器，我将 align-content 设置为 space- Between 。但所有条纹仍然紧密排列，之间没有任何间隙。
如何强制条纹下方的空白区域均匀分布在条纹之间和周围？
骗子代码是 here .
<body style="height:100%;">
<div style="display:flex;height:100%;background-color:#cccccc;flex-direction:column;align-content:space-between;">
<div style="height:100px;background-color:#222222;width:100%;">
</div>
<div style="height:100px;background-color:#777777; width:100%;">
</div>
<div style="height:100px;background-color:pink; width:100%;">
</div>
</div>
</body>最佳答案
首先，您需要在 html 上设置 height: 100%，接下来您应该使用 justify-content: space- Between;。
默认情况下，flex-direction 为 row，主轴 为从左到右，因此 justify-content沿主轴或水平放置元素。但是，当您将 flex-direction 更改为 column 时，主轴现在更改为从上到下，并且 justify-content 仍沿主轴定位元素但现在是垂直的。
html {
height: 100%;
}<body style="height:100%;">
<div style="display:flex;height:100%;background-color:#cccccc;flex-direction:column;justify-content:space-between;">
<div style="height:100px;background-color:#222222;width:100%;">
</div>
<div style="height:100px;background-color:#777777; width:100%;">
</div>
<div style="height:100px;background-color:pink; width:100%;">
</div>
</div>关于html - flexbox 对齐内容不会在元素之间留下空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39307572/