css - 柔性 : Align all children at flex-start but force one child to end?

Question

我有一个包含 3 个 child 的 flex 容器，我想确保所有 child 都在 flex-start 处对齐，但是最后一个 child 应该坐在容器的底部。

难道不能将align-content和align-self结合起来吗？

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 15px 15px 50px 15px;
    height: 100%;
    background: red;
    width: 200px;
    height: 500px;
}

.item-1,
.item-2,
.item-3 { width: 100%; }

.item-3 {
    align-self: flex-end;
}

<div class="container">
  <div class="item-1">One</div>
  <div class="item-2">Two</div>
  <div class="item-3">Three</div>
</div>

Answer 1

因为你想要元素的 100% 宽度，你可以切换到列方向然后使用边距来控制对齐方式:

.container {
  display: flex;
  flex-direction: column;
  padding: 15px 15px 50px 15px;
  height: 100%;
  background: red;
  width: 200px;
  height: 300px;
}

.item-3 {
  margin-top: auto;
}

<div class="container">
  <div class="item-1">One</div>
  <div class="item-2">Two</div>
  <div class="item-3">Three</div>
</div>