Question

我试图将每个孩子直接对齐（垂直）。显然align-items: flex-start并没有完全做到这一点，因为每个孩子之间都有一些自动间隔。

以下是我得到的结果片段。孩子们沿着父母的可用空间对齐，这不是我想要达到的。我想要的是每个孩子在其上一个兄弟之后直接对齐（垂直，如在片段中）。

提前致谢！

编辑：flex-flow: column wrap和align-content: flex-start都做到了。但是，我忘了将align-self: flex-end添加到最后一个孩子，当应用上述两种解决方案中的任何一种时，这种方式无效。

* {
  box-sizing: border-box;
}

#container {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: flex-start;
  flex-flow: row wrap;
}
#container > div {
  width: 100%;
  margin: 10px;
  border: 2px solid #ff0000;
}
#container > div:nth-child(1) { height: 5%; }
#container > div:nth-child(2) { height: 10%; }
#container > div:nth-child(3) { height: 20%; align-self: flex-end; }

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

您需要在父元素上设置align-content: flex-start，因为初始值为stretch。

<强>拉伸

如果沿横轴的项目组合尺寸小于对齐容器的尺寸，则任何自动尺寸的项目的尺寸均匀增加（不成比例），同时仍然遵守max-height /施加的约束max-width（或等效功能），以便组合尺寸沿横轴精确填充对齐容器。

＆＃13;

* {
  box-sizing: border-box;
}
#container {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: flex-start;
  flex-flow: row wrap;
  align-content: flex-start;
}
#container > div {
  width: 100%;
  margin: 10px;
  border: 2px solid #ff0000;
}
#container > div:nth-child(1) { height: 5%; }
#container > div:nth-child(2) { height: 10%; }
#container > div:nth-child(3) { height: 20%; }

＆＃13;

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

更新：另一个解决方案是设置flex-direction: column，然后您可以使用margin来定位特定的Flex项目。

＆＃13;

* {
  box-sizing: border-box;
}
#container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}
#container > div {
  width: calc(100% - 20px);
  margin: 10px;
  border: 2px solid #ff0000;
}
#container > div:nth-child(1) {
  height: 5%;
}
#container > div:nth-child(2) {
  height: 10%;
}
#container > div:nth-child(3) {
  height: 20%;
  margin-top: auto;
}

＆＃13;

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

Answer 2

您需要为流量设置列

#container {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: flex-start;
  flex-flow: column wrap;
}
#container > div:nth-child(3) { height: 20%; margin-top: auto; }

更新：

将余量自动添加到最后一个孩子

https://jsfiddle.net/qghsgze5/2/

“align-items：flex-start”将子项与父项的可用空间对齐

2 个答案: