【HTML中flex属性】设置flex属性时子元素宽度超出父元素

最新推荐文章于 2024-11-20 04:30:00 发布

原创最新推荐文章于 2024-11-20 04:30:00 发布 · 1.2w 阅读

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端踩坑

本文深入探讨CSS Flex布局中，通过设置元素的flex属性实现宽度自适应的原理。特别是在左右两块布局中，左边元素定宽，右边元素自动充满屏幕的情况。文章详细解释了为何设置flex:1可以实现宽度自适应，以及解决子元素宽度溢出问题的方法。

场景： 元素分为左右两块，左边元素定宽，右边元素自动充满屏幕。

设置右边元素flex：1，当右边元素宽度超过父元素时，会造成右边宽度溢出。
在这里插入图片描述
原样式：

.container {
	  width:400px;
      display:flex;
    }
.left {
      width: 240px;
    }
 .right {
     flex: 1;
    }

右边多设置一个width:0或overflow:hiddlen后样式正常。

.container {
      display:flex;
    }
.left {
      width: 240px;
    }
 .right {
     width: 0;
     flex: 1;
    }

5.16更新：

为什么设置flex: 1可以实现宽度自适应？

这与flex属性的赋值语法有关，CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。具体的语法规则可以参考MDN

flex: 1 = flex: 1 1 auto = flex-grow: 1

flex-grow属性用于瓜分父容器的剩余空间，在上面例子中，只有right设置了flex：1，所以它占了剩余空间的所有比例，实现了宽度的自适应。

对于为什么子元素宽度会溢出的问题，网上查了一下只说是弹性布局的特性以及父元素没有一个固定的长度进行限制这两个因素造成的，具体原因还不太清楚。。