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

Question

这些是要求:

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

父容器是一个普通的 block 级元素，如 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