Flex布局子元素撑开宽度

Web前端2974阅读模式

在Flex布局中,默认情况下,子元素是不会撑开父元素的。这是因为Flex布局是一种自适应布局,它会根据子元素的大小和比例来自动调整父元素的大小。如果你希望子元素能够撑开父元素,可以通过下面的方法实现。

首先为父元素添加 display: flex;属性:

.parent {  
  display: flex;  
}

为子元素的flex-grow属性:

flex-grow属性定义了子元素在剩余空间中的放大比例。当父元素的空间不足以容纳所有子元素时,会根据子元素的flex-grow值来分配剩余空间。你可以将某个子元素的flex-grow设置为1(或者更大),这样该子元素会占据所有剩余空间,从而撑开父元素。

.child {  
  flex-grow: 1;  
}

实测大多数情况下有效。

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  2  访客  1  作者  1
    • ccbbp
      ccbbp 1

      flex确实方便,尤其垂直居中的时候,比vertical-align好用太多了

        • 知更鸟
          知更鸟

          @ ccbbp 这要感谢微硬,抛弃自己的垃圾浏览器,让网页设计者有更大的发挥空间

      匿名

      发表评论

      匿名网友
      :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

      拖动滑块以完成验证