React 和 Material UI：如何使用 Box 组织页面布局？答案

【问题标题】：React and Material UI: How to organize page layout using Box?React 和 Material UI：如何使用 Box 组织页面布局？
【发布时间】：2022-07-25 10:59:39
【问题描述】：

我正在使用 React 和 Material UI 开发一个网络应用程序。我想要一个在第三个盒子里面有两个盒子的布局。底部的盒子应该足够高以容纳其内容。顶部的 Box，必须占据第三个 Box 内剩余的所有空间。

我正在尝试使用以下代码来执行此操作。但是，它不起作用。有人可以帮我吗？

<Box
                                component="main"
                                sx={{
                                    height: '100vh',
                                    overflow: 'auto',
                                    justifyContent: "center",
                                    display: 'flex',
                                    flexWrap: 'wrap',
                                    alignContent: 'top',
                                    marginTop: '50px', bgcolor: "green"
                                }}
                            >
    
    <Box sx={{flexDirection: 'row'}}>
    {/* Content here */}
    </Box>
    <Box sx={{
            minWidth: '100%',
            bgcolor: "secondary.main",
            marginTop: "40px",
            marginBottom: "0px", 
            paddingBottom: "0px", paddingTop: "40px", 
            paddingLeft: "40px", paddingRight: "40px"
        }}>
        {/* Content here */}
    </Box>
</Box>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

由于您在主框中使用display: 'flex'，这很容易实现。您只需添加alignContent: 'space-between'，这将使两个框与主容器/框的垂直边缘对齐。

所以你的代码应该是这样的：

<Box
      component="main"
      sx={{
        height: '100vh',
        overflow: 'auto',
        justifyContent: "center",
        display: 'flex',
        flexWrap: 'wrap',
        alignContent: 'top',
        marginTop: '50px',
        bgcolor: "green",
        alignContent: 'space-between'
      }}>
      <Box sx={{ flexDirection: 'row' }}>
        {/* Content here */}
      </Box>
      <Box sx={{
        minWidth: '100%',
        bgcolor: "secondary.main",
        marginTop: "40px 0 0 0",
        padding: '40px 40px 0 40px'
      }}>
        {/* Content here */}
      </Box>
    </Box>

现在，就你的观点而言，“顶部的盒子，必须占据第三个盒子内剩余的所有空间”剩余空间在技术上是为顶部盒子保留的，因为你可以向它添加更多内容而底部框与屏幕底部对齐。

作为参考，阅读更多关于align-content property

【讨论】：