Flex布局导致子项高度一致，怎么办

背景：

在做移动端项目时，遇到了一个问题，css设置商品的高度是自动的，但是左边的商品的高度，莫名就变高了，有很大的一块空白，如下图。

但当左右两数据相同时，高度显示又是正常的。

原因：

最后，找到问题所在，原来是flex布局，会让其子项的高度一致 。所以，才会出现上面的情况。

Flex 布局会默认：

把所有子项变成水平排列。

默认不自动换行。

让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。

问题：

Flex布局如何让子项保持自身高度

解决方案：

直接在 flex 容器上，将 align-items 设为 flex-start ,或者 align-items 属性的其他值都可以, 子项就会保持其自身的高度了 。