Flex:在弹性开始时对齐所有孩子,但强迫一个孩子结束？

Question

我有一个有3个孩子的弹性容器,我想确保孩子们都对齐flex-start,但是最后一个孩子应该坐在容器的底部.

这难道不是可以组合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>