为何Grid嵌套容器默认换行，添加xs断点后却不换行？

一、原代码为何换行 #

先看原代码：

<Grid container>
  <Grid item bgcolor={'red'}>
    Item 4
  </Grid>
  <Grid item bgcolor={'blue'}>
    Item 5
  </Grid>
  <Grid item container>
    <Grid item bgcolor={'green'}>
      Item 6
    </Grid>
  </Grid>
</Grid>

出现换行的核心原因：

• 当Grid组件同时设置item和container属性时，它兼具两个身份：既是外层Grid容器的flex子项，自身又是一个flex容器。
• Material-UI的Grid容器（container）默认会设置width: 100%，也就是说这个嵌套的Grid item container本身宽度是父容器的100%。
• 外层Grid容器默认是flex-wrap: wrap（空间不足时自动换行），前面两个子项（Item4、Item5）已经占据了部分宽度，这个宽度100%的嵌套容器无法挤入同一行，因此被挤到下一行，导致Item6单独显示在第二行。

二、添加xs后为何不换行 #

修改后的关键代码：

<Grid item container xs>

解决换行的原因：

• 给Grid item添加xs属性（等价于xs: true）后，Material-UI会给这个子项设置flex: 1 1 0%的样式：
  • flex-grow: 1：允许子项拉伸，填充父容器的剩余空间
  • flex-shrink: 1：允许子项在空间不足时收缩
  • flex-basis: 0%：子项的基准宽度设为0，不再默认占满100%宽度
• 此时这个嵌套容器的宽度不再是强制100%，而是会根据父容器的剩余空间自适应调整，既能和前面两个子项（Item4、Item5）挤在同一行，又能拉伸填充剩余空间，因此不会换行。

内容的提问来源于stack exchange，提问作者WeDoTheBest4You