网格弯曲端没有按我预期的方式运行答案

【问题标题】：Grid flex end not acting the way I expected网格弯曲端没有按我预期的方式运行
【发布时间】：2021-07-26 13:26:50
【问题描述】：

我正在尝试将两个按钮放在右侧。这是我的代码：

export const WalletsContainer = () => {
  return (
    <Grid style={{ background: 'red' }} direction={'column'} alignItems={'flex-end'}>
      <Grid xs={2}>
        <CustomButton buttonText={t('add')} onClick={() => console.log('Add')} />
      </Grid>
      <Grid xs={2}>
        <CustomButton buttonText={t('download')} onClick={() => console.log('Download')} />
      </Grid>
    </Grid>
  );
};

这就是它的样子：

我的问题是，为什么现在在右边？基于docs alignItems={'flex-end'} 应该可以解决问题。还是我理解错了？

【问题讨论】：

您应该使用justifyContent="flex-end" 而不是alignItems。
@PriyankKachhela 这仍然没有帮助。为什么它应该起作用？这违反了文档。它们过时了吗？
我认为您在 Grid 中缺少 container 道具。一旦你添加了container 属性，它就会以display: flex 样式运行，然后它就会像预期的那样工作。在您共享的文档中，有 container 可用的道具。

标签： javascript css reactjs material-ui

【解决方案1】：

 <Grid container style={{ background: 'red' }} direction={'column'} alignItems={'flex-end'}>

应该做的伎俩。

来自文档 - 容器 - 如果为 true，则组件将具有 flex 容器行为。您应该用容器包装物品。

【讨论】：