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

我很难用MaterialUI的

网格
组件实现一些简单的功能。具体地说，我想在一个布局行上将一个项目向左对齐，另一个项目向右对齐

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

相关代码段
尝试将
元素放在左侧，将
放在右侧：

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

我还发现，一般来说，这需要使用许多
Grid
组件，如果可能的话，我希望编写更干净的代码

你对这个问题有什么建议或解决方法吗

万分感谢

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

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

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

作为第二种选择（对我来说是最好的选择，因为您使用的是最全面的材质UI，如果您使用它，这是最好的选择。尽可能多地使用库），您可以这样做：

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

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


//目标是使其与左侧对齐
一些文本
//目标是将其与右侧对齐
//这里有一个简单的“开关”按钮
我现在正在使用它，它可以很好地将一个对齐最左边，一个对齐最右边

灵感来自：


左边
赖特
我使用了另一种方法将一个网格项列在右侧。类似的方法也可以用于在右侧显示网格项，在左侧显示网格项


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


//要在左侧显示的项目
.
.
.
//项目占用剩余空间
//项目显示在右侧
你好。。
我很感谢你看这个，@niconiahi，但这对我不起作用。添加一个基于CSS的类，比如rowLayout:{display:'flex'，alignItems:'baseline'，}，对我来说似乎更接近解决方案。

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