我有两个网格元素,我想通过使用 flex 使它们具有相同的高度,但是似乎没有任何效果。我相信我现在可以正确使用 Material UI 中的 Grid 元素。我也尝试过使用高度和宽度属性。
<Paper elevation={10} style={{padding:'1.5em'}}>
<Grid container direction='row' spacing={2} style={{display:'flex'}}>
<Grid item style={{height:'100%', width:'50%'}}>
</Grid>
<Grid item style={{height:'100%', width:'50%'}}>
</Grid>
</Grid>
</Paper>
最佳答案
在 Material UI 中,您可以在容器 Grid 上使用 alignItems="stretch"
,如下面的代码所示:
<Paper elevation={10} style={{padding:'1.5em'}}>
<Grid container direction='row' spacing={2} alignItems="stretch">
<Grid item style={{height:'100%', width:'50%'}}>
</Grid>
<Grid item style={{height:'100%', width:'50%'}}>
</Grid>
</Grid>
</Paper>
而且你不需要设置 style={{display:'flex'}}
因为网格样式也设置了它。
References:
关于html - 使用 Flex-box 为 Material-UI 制作两个相同高度的网格元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57729989/