Flex布局子元素撑开宽度

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

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

.parent {  
  display: flex;  
}

为子元素的flex-grow属性：

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

.child {  
  flex-grow: 1;  
}

实测大多数情况下有效。