flex布局后，子元素高度保持自身高度

以下为不设置任何css情况下，正常流布局。图片和文字属于行内元素，图文环绕展示。
需求：图片和文字单独各一列，且各自显示正常的自身高度

**解决办法：**设置容器p的布局为flex布局，display：flex。此时flex布局内的子元素会默认水平显示。
出现新问题，子元素里的图片高度不对了，取的是父容器p里子元素的最大高度，原因是：
这是因为Flex 布局会默认：
● 把所有子项变成水平排列。
● 默认不自动换行。
● 让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。
这样设置背景色的时候非常不方便，那么直接在父项上，将align-items设为 flex-start,或者align-items属性的其他值都可以,子项就会保持自身的高度了。

最终效果：

这篇好文章是转载于：编程之路