等高元素，在 flexbox 容器内底部对齐，纯 CSS

Question

这些是要求：

1. 对父元素使用display:flex
2. flex-container 中元素的文本必须底部对齐；即当一行副本中断为两行或三行或更多行时，其他同级元素仍应垂直对齐到主元素的末尾。
3. 没有 javascript 或 overflow:hidden hack。

父容器是一个普通的块级元素，就像一个 div。

内部标记很灵活，但需要包含链接和底部边框，但我希望避免过度嵌套。

到目前为止，我已经能够使用align-self: flex-end 保持子元素底部对齐，但高度不一样。我可以通过删除此属性并仅保留它flex:1 来平衡高度，但这不会垂直对齐底部。

这是我目前所拥有的代码笔（详情如下）：http://codepen.io/oomlaut/pen/ZQJdZP。感谢您提供任何帮助，因为我承认我还没有掌握 flex-box 的主题。

* {
  box-sizing:border-box;
}
.flexcontainer {
  position:relative;
  outline: 1px dashed #333;
  list-style-type:none;
  width:400px;
  margin:0 auto;
  padding:1em;
  background:blue;

  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

}
.flexitem {
  width:25%;
  padding:1em;
  display:flex;
  flex: 1;
  align-self: flex-end; /* <--- removing this will normalize heights but remove vertial align:bottom */
}
.flexcontainer a{
  text-decoration:none;
  border-bottom:1px solid red;
  background:gray;
}
.flexcontainer a:hover{
  background:white;
}

<div class="flexcontainer">
  <a class="flexitem" href="#">Link1</a>
  <a class="flexitem" href="#">Another Link2</a>
  <a class="flexitem" href="#">Link3</a>
  <a class="flexitem" href="#">Link4</a>
</div>

Answer 1

你需要的是：

  align-items: flex-end;

而不是

  align-self: flex-end; 

因为你想对齐内容，而不是容器本身；）

http://codepen.io/anon/pen/YwxmBa