“align-items：flex-start”沿父级可用空间对齐子级[重复]

Question

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

下面是我得到的结果的 sn-p。孩子们沿着他们父母的可用空间排列自己，这不是我想要实现的。我想要的是每个孩子在其前一个兄弟姐妹之后直接对齐（垂直，如在 sn-p 中）。

提前致谢！

编辑：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

您需要为流设置列

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

Answer 2

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

拉伸

如果项目沿交叉轴的组合大小小于对齐容器的大小，则任何自动调整大小的项目的大小都会平均增加（不成比例），同时仍然遵守 max-height/ 施加的约束最大宽度（或等效功能），以便组合大小沿交叉轴精确填充对齐容器。

* {
  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%; }

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

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

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

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