Question

我在这两个地方stack overflow和css-tricks中提到了有关flexbox align-content的资料。

我尝试放置三个不同颜色的水平条，高度为100％，间距相等。

对于flex容器，我将align-content设置为space-between。但是，所有条纹都紧密堆积，两者之间没有空隙。

如何强制条纹下面的空白区域分布在...之间？周围一样吗？

Plunker代码为here。

＆＃13;

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

＆＃13;

Answer 1

首先，您需要在html上设置height: 100%，接下来应该使用justify-content: space-between;。

默认情况下，flex-direction为row，主轴为从左到右，因此justify-content沿主轴或水平位置元素。但是，当您将flex-direction更改为column时，现在主轴已更改为从上到下，justify-content位置元素仍然沿主轴但现在是垂直轴。

＆＃13;

html {
  height: 100%;
}

＆＃13;

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

＆＃13;

Flex框对齐内容不会在项

1 个答案: