原因:Flex 布局的默认设置为:

    把所有子项变成水平排列。
    默认不自动换行。
    让子项与其内容等宽,并把所有子项的高度变为最高子项的高度。

 

解决方法:

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

如果是使用了flex-wrap,则应该使用align-content,而不是align-items

posted on 2021-06-16 11:29  lbnnbs  阅读(4042)  评论(1编辑  收藏  举报