材质UI网格对齐方式

Question

如何在物料UI中垂直对齐项目？https://codesandbox.io/s/material-demo-forked-wrn9x

这里我想把Start元素和顶部，Center元素放在中间，End元素放在底部

我正在寻找最清晰和最好的解决方案

Answer 1

如果您使用grid，只需执行以下操作：

     <Grid
        container
        direction="column"
        justify="center"
        alignItems="center"
        spacing={3}
        className={classes.container}
      >

你可以使用MUI文档的交互式工具来玩耍，并获得你必须通过的道具，以便在未来创建你需要的所有布局。https://material-ui.com/components/grid/#grid

Answer 2

下面的代码将使三个网格-开始、中心和结束相继出现在一列中。此布局将在所有屏幕分辨率/断点上保持不变。

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,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
    border: '2px solid #969292',
  }
 
}));

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

  return (
    <div className={classes.root}>
      <Grid>
        <Grid item xs={12}>
          <Paper className={classes.paper}>Start</Paper>
        </Grid>
        <Grid item item xs={12}>
          <Paper className={classes.paper}>Center</Paper>
        </Grid>
        <Grid item item xs={12}>
          <Paper className={classes.paper}>End</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

此代码将生成如下所示的布局：

​