Question

我很难用MaterialUI的Grid组件来实现简单的目标。具体来说，我想在一个布局行上将一个项目向左对齐，将另一个项目向右对齐。

我进行了广泛的搜索，但没有找到任何可行的解决方案。我尝试了许多建议，包括在justifyContent组件中和JSS中使用alignContent和Grid，以及“推送”内容的flex: 1技术。 / p>

相关代码段

尝试将<Typography>元素放在左侧，将<FormGroup>放在右侧：

<Container>
  <Grid container spacing={3}>
    <Grid className={classes.rowLayout}>
      // Goal is to align this to the LEFT
      <Grid item xs={6}>
        <Typography variant="h6" gutterBottom>Some Text</Typography>
      </Grid>
      // Goal is to align this to the RIGHT
      <Grid item xs={3}>
        <FormGroup>
          // Simple `Switch` button goes here
        </FormGroup>
      </Grid>
    </Grid>
  </Grid>
</Container>

MaterialUI JSS样式：

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    width: '100%'
  },
  rowLayout: {
    display: 'flex',
    alignItems: 'baseline'
  },
}));

我还发现，通常来说，这需要使用许多Grid组件，并且我希望尽可能编写更简洁的代码。

您对此问题有任何提示或解决方法吗？

感谢一百万，

戴维斯

Answer 1

我认为最好的选择是像这样使用flex：

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    width: '100%'
  },
  rowLayout: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center' // To be vertically aligned
  },
}));

作为第二选择（对我来说，这是最好的选择，因为您正在使用Material UI的最完整表达；如果使用它，这是最好的选择。请尽可能多地使用库），您可以做一些事情像这样：

<Container>
  <Grid container spacing={3}>
    <Grid container direction="row" justify="space-between" alignItems="center">
      // Goal is to align this to the LEFT
      <Grid item xs={6}>
        <Typography variant="h6" gutterBottom>Some Text</Typography>
      </Grid>
      // Goal is to align this to the RIGHT
      <Grid item xs={3}>
        <FormGroup>
          // Simple `Switch` button goes here
        </FormGroup>
      </Grid>
    </Grid>
  </Grid>
</Container>

Answer 2

我使用了一种不同的方法在右侧列出一个网格项。类似的方法可用于在右侧显示网格项，在左侧显示一项。


<Gird container>
 <Grid item/>                                     //Items to show on left
 .
 .
 .
  <Grid item xs>                                  // Item takes remaining space
   <Grid container direction="row-reverse">       // Item shows on right
    <Grid item><Button> HOLA </Button></Grid>..
   <Grid>
  </Grid>
 </Grid>

Answer 3

此刻我正在使用它，它可以很好地将一个对齐到最左边，将一个对齐到最右边。

灵感来自：How to align flexbox columns left and right?

const useStyles = makeStyles((theme) => ({
  right: {
    marginLeft: 'auto'
  }
}));

<Grid container alignItems="center">
  <Grid>
    <Typography variant="h4" component="h4">Left</Typography>
  </Grid>
  <Grid className={classes.right}>
    <Button variant="contained" color="primary">Right</Button>
  </Grid>
</Grid>

如何使用材质UI网格组件将一个项目左对齐，而另一个右对齐

相关代码段

3 个答案: