Flexbox，不同的对齐线

Question

根据规范和几个博客，＆＃39; align-self＆＃39;覆盖＆＃39; align-items＆＃39;其母公司的财产。在CodePen示例中，我使用了flex-direction：列，因为align-self仅适用于横轴。我还没有能够摆脱额外的空白区域。我知道我可以将每个li作为一个容器，并将其中的项目对齐，但如果可能的话，我真的试图在不创建更多容器的情况下解决这个问题。

最后一项很好地与最后一项对齐，但是在第一幕和最后一幕之间的所有内容几乎都像“空间”一样。但我意识到它真的是一个强制每个项目包装的专栏。如果我删除任何对齐属性，列和flex-wrap的组合会导致项目＆＃34;分发＆＃34;。可能这是flexbox规范的限制......但我不确定。

HTML

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

CSS

* { box-sizing: border-box; }

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  align-items: flex-start;
  border: 1px solid black;
  li {
    display: flex;
    justify-content: center;
    width: 100px;
    border-right: 1px solid black;
    &:last-of-type {
      align-self: flex-end;
    }
  }
}