使用flex布局，子元素怎么高度自适应？

Question

1、想用flex实现这种布局

2、各个子元素高度不固定，从上到下依次排列
请问可以怎么实现？

附：
我对父元素定义了下面的规则：

display:flex;
flex-flow:row wrap;

对子元素用p标签放了一些文本，未设置高度，结果显示效果如下红色标记是子元素被拉伸了，高度没有自适应：

Answer 1

父元素上增加align-items:flex-start; 交叉轴的对齐方式，默认是stretch

Answer 2

你的布局需求看元素是等宽而不等高的，所以这里应该沿 column 方向排列，即flex-direction: column

http://codepen.io/cool_zjy/pen/zBWwLZ

Answer 3

angular-material官网里，有说的，记不大起来了，去看看就明白了

Answer 4

可以给子元素添加一个 align-self: end;