CSS flex 布局子元素高度没有被撑开

示例代码

id=middle的子元素没有顶部对齐。

<div style="display: flex;align-items: center">
    <div>123<br>123<br>123<br></div>
    <div id="middle">123</div>
    <div>123<br>123<br>123<br></div>
</div>

原因

父元素设置了align-items: center，则子元素不会被撑开。

解决

方法一

去除父元素的align-items: center。

方法二

给id=middle的子元素加上align-self: stretch。

align-self是覆盖父元素的align-items，意思是自身的对齐方式。

说明

flex布局默认的align-items方式是stretch。