Bootstrap

flex布局后,子元素高度如何保持自身高度

以下为不设置任何css情况下,正常流布局。图片和文字属于行内元素,图文环绕展示。
需求:图片和文字单独各一列,且各自显示正常的自身高度
在这里插入图片描述
**解决办法:**设置容器p的布局为flex布局,display:flex。此时flex布局内的子元素会默认水平显示。
出现新问题,子元素里的图片高度不对了,取的是父容器p里子元素的最大高度,原因是:
这是因为Flex 布局会默认:
● 把所有子项变成水平排列。
● 默认不自动换行。
● 让子项与其内容等宽,并把所有子项的高度变为最高子项的高度。

这样设置背景色的时候非常不方便,那么直接在父项上,将align-items设为 flex-start,或者align-items属性的其他值都可以,子项就会保持自身的高度了。
在这里插入图片描述
最终效果:
在这里插入图片描述

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;