前端开发遇到的flex布局子元素未设置宽,但宽度不能自动随着内容宽度变化bug
css类型bug记录项目场景:父容器使用flex布局,子元素也使用了flex布局,父容器,子元素未设置宽,目的是子元素宽度随着文本内容自动变化,但子元素宽度始终等于父元素宽度问题描述:想让会员所在子元素随着文本内容增加,自动撑宽,但子元素始终等于父容器.h-info宽度,随着父容器自动变宽原因分析:flex布局影响,需要在影响宽度的水平轴方向,因为父容器是列排列,所以水平轴及交叉轴align-it
·
css类型bug记录
项目场景:
父容器使用flex布局,子元素也使用了flex布局,父容器,子元素未设置宽,目的是子元素宽度随着文本内容自动变化,但子元素宽度始终等于父元素宽度
问题描述:
想让会员所在子元素随着文本内容增加,自动撑宽,但子元素始终等于父容器.h-info宽度,随着父容器自动变宽
原因分析:
flex布局影响,需要在影响宽度的水平轴方向,因为父容器是列排列,所以水平轴及交叉轴align-items给定一个位置值即可(justify-content是主轴,此时为垂直方向)
解决方案:
给父容器.h-info一个水平方向位置属性值,align-items: flex-start,即可,这样会员所在子容器宽度就会随着会员文本增加自动撑宽
更多推荐
已为社区贡献1条内容
所有评论(0)