flex 子元素撑开父元素

使用 Flexbox 布局时，可以通过设置 align-items 和 justify-content 属性来对齐和排列子元素。如果您希望子元素能够撑开父元素，您可以尝试以下几种方法：

可以将子元素的宽度设置为100%。这样，子元素的宽度将会和父元素的宽度相同，从而撑开父元素。例如：

.parent {
  display: flex;
.child {
  width: 100%;
设置父元素的高度为最小内容高度
可以将父元素的高度设置为最小内容高度，这样父元素的高度将会自动适应子元素的高度，从而撑开父元素。例如：
.parent {
  display: flex;
  align-items: flex-start;
  min-height: min-content;
使用 align-items 和 flex-wrap 属性
如果您的子元素有多个，并且您希望它们在同一行内排列，并且能够撑开父元素，您可以尝试使用 align-items 和 flex-wrap 属性。例如：
.parent {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
其中，align-items: stretch 表示子元素在交叉轴上拉伸，从而与父元素的高度相同，flex-wrap: wrap 表示子元素可以换行排列。
希望以上解答能够帮助到您。如果您有其他问题，请随时提出。