Css 为什么赢了'；t必须改变方向：'；列'；推送间隔？

我有：

---

但是它并没有将我的内容分开。

顶级

组件的高度可能正是它所包含元素的高度

所以，它推动了两个元素之间的所有额外空间，恰好有0px的额外空间

您可以通过使用以下内容为

元素设置一个固定高度来临时测试这一点：

    heroGrid: {
      flexDirection: 'column',
      justifyContent: 'space-between',
      alignContent: 'space-between',
      alignItems: 'space-between'
    }

---

如果您希望元素按需要分开，那么您需要弄清楚如何实际设置网格元素的高度。如果它应该填充父对象，则可以使高度

100%

。如果应该是固定高度，则可以将其设置为特定的固定高度。

flex direction列需要高于内容的高度来显示flex子级之间的间隙。

    heroGrid: {
      flexDirection: 'column',
      justifyContent: 'space-between',
      alignContent: 'space-between',
      alignItems: 'space-between'
    }

<Grid item xs={12} md={6} className={classes.heroGrid} style={{height: 500}}>