设置flex属性时子元素宽度超出父元素
设置右边元素flex:1
,当右边元素宽度超过父元素时,会造成右边宽度溢出。
右边多设置一个width:0
或overflow:hiddlen
后样式正常。
为什么设置flex: 1可以实现宽度自适应?
这与flex属性的赋值语法有关,CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性,用来设置 flex-grow, flex-shrink 与 flex-basis。具体的语法规则可以参考MDN
三种属性比较好理解的分析参考:关于 Flex 中的 flex-grow、flex-shrink、flex-basis
flex: 1 = flex: 1 1 auto = flex-grow: 1
flex-grow属性用于瓜分父容器的剩余空间,在上面例子中,只有right设置了flex:1,所以它占了剩余空间的所有比例,实现了宽度的自适应。
对于为什么子元素宽度会溢出的问题,网上查了一下只说是弹性布局的特性以及父元素没有一个固定的长度进行限制这两个因素造成的,具体原因还不太清楚。。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步