使用 MUI 网格时如何在属性列之间实现 space？

Question

当使用 MUI Grid 时元素按列排列时，我们如何实现 space-between。阅读我们可以通过提供 flex:1 和 height:100% 获得的一些答案。但是当我使用 MUI Grid 时，我想知道如何在网格而不是 flex 中实现这一点？附加代码沙箱，我需要在其中分隔两个按钮，因为我试图在底部显示第二个按钮。

https://codesandbox.io/s/boxsx-material-demo-forked-392dfl?file=/demo.tsx

Answer 1

使用间距属性作为间距

forked codesandbox

Answer 2

将 height 提供给 container 网格，它将满足您的目的。你的代码是正确的，但如果你想把 button 放在你的 div 的底部，那么它应该需要那么多 space 才能放置它。

      <Grid
         container
         direction="column"
        style={{ height: "90vh" }}
         justifyContent="space-between"
         alignItems="center"
         
       >

使用 MUI 网格时如何在属性列之间实现 space？

How to achieve space between property column wise when using MUI grid?

css

material-ui

使用 MUI 网格时如何在 属性 列之间实现 space？

How to achieve space between property column wise when using MUI grid?

css

material-ui

使用 MUI 网格时如何在属性列之间实现 space？