flex-wrap容器中每行子元素高度如何一致？

Question

<div class="flex-box">
   <div>a<br/>a<br/>a<br/><a class="more">more</a></div>
   <div>b<br/><a class="more">more</a></div>
   <div>c<br/>c<br/>c<br/>c<br/><a class="more">more</a></div>
   <div>d<br/>d<a class="more">more</a></div>
</div>
.flex-box{
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-box>div{
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    width: 50%;
}
flex-box a{
    position:absolute;
    bottom:0;
    left:0;
    color:red
}

使用flex做布局，想使flex-wrap容器中每行子元素高度一致，达到每行的more链接对齐目的，有什么好的方法实现呢？

Answer 1

删掉 height: 100%;
相当于 在父组件启用了默认的 align-items:stretch
相当于每一行的高度都是 height最大的那一个

Answer 2

.flex-box{

display: flex;
align-items:stretch;

}

Answer 3

删掉 height: 100%;