css - 如何拉伸(stretch)我的元素容器并设置底部和顶部边距？

Question

我正在使用 Material-UI图书馆 ReactJS ，但我在使用 flexbox 时遇到了一些问题。

我想设置我的 Item Container在我的中心 div , 拉伸(stretch)它以获取所有可用的高度并设置 Bottom and Top margin .

我正在尝试 alignItems="stretch"但它不起作用(原始版本代码)。 我当然可以设置 Grid Item and Paper to 100% 的高度，但我不认为这是使元素填充所有垂直空间的优雅方式(第二版代码)。 此外，如果我将 Grid Item 高度和 Paper 高度设置为 100%，并将上边距和下边距设置为这两个元素，Paper 会完全忽略下边距。 再一次，宽度和高度超过了屏幕尺寸(见下面的第二张图片)，为什么会这样？

原始版本:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    height: "100%"
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
}));

export default function CenteredGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container style={{height: "100%", backgroundColor:"green"}} justify= "center" alignItems="stretch"spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

第二个版本:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    height: "100%"
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    height: "100%",
    color: theme.palette.text.secondary,
  },
}));

export default function CenteredGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container style={{height: "100%", backgroundColor:"green"}} justify= "center" alignItems="stretch" spacing={3}>
        <Grid item xs={12} style={{backgroundColor: "red", marginTop:10, marginBottom:10}}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

这是我的 index.css，我在其中将所有组件设置为 height="100%"。

body {
  height: 100%;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  height: 100%;
  width: 100%;
}

div#root {
  height: 100%; /* remove this line to see div.app is no more 100% height */
  width: 100%;
  background-color: indigo;
}

div.app {
  height: 100%;
  width: 100%;
  background-color: cornsilk;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

我的预期结果是一个 Grid Item，里面有一个 Paper 元素，它在 Grid 容器内居中，拉伸(stretch)高度以填充所有垂直空间，但有一些前缀的底部和顶部边距。

我的原始代码结果:

我的第二个版本代码结果:

加上:

我用过React Native，感觉手机端的flexbox更“直接”。您是否有一些资源和教程可以很好地理解我如何通过代码示例在 Reactjs 中处理 UI？

Answer 1

检查 this codesandbox code我已经为你修复了代码。如果您还想删除红色边框，只需为item-container 设置padding:0。

另外，还有一个建议，不要混用样式。您正在使用内联样式 以及使用makeStyle 创建样式。只使用一个，这样您就可以在需要进行任何更改时更改单一来源。