css flex布局实现电影字幕效果

最近做的一个语音转换项目，需要即时通过websocket把服务器转换的语音问题以电影字幕效果实现处理，想了很久，发现flex方法可以巧妙实现，代码如下；

 	height: 20px;
    display: flex;
    flex-flow: column-reverse;
    align-items: baseline;
    overflow: hidden;

通过flex-flow的主轴设置为垂直方向，继续设置下沿起点，然后统一容器基线即可。