如何使用 Material UI Grid 组件将一个项目左对齐和另一个右对齐

Question

我在尝试使用 MaterialUI 中的 Grid 组件实现一些简单的事情时遇到了困难。具体来说，我想在一个布局行上将一项左对齐，另一项右对齐。

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

相关代码片段

尝试将<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

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

灵感来自：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> 

Answer 3

我使用不同的方法将一个网格项目列在右侧。可以使用类似的方法在右侧显示网格项目，在左侧显示一个。

<Grid 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>