Flex: Выровняйте всех детей в flex-start, но вынудите одного ребенка закончить?

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>