在 material-ui 中为网格项指定“对齐”的最佳方法是什么？

Question

我从material-UI图书馆有一个简单的网格。它看起来像这样：

<Grid container>
    <Grid item sm={6}>
        <SearchPanel/>
    </Grid>
    <Grid item sm={6}>
        <ItemStatusFilter/>
    </Grid>
</Grid>

我只是不明白如何在中心对齐第一个网格项，例如在右侧对齐第二个网格项？

UPD：我可以justify-content: flex-end!important在我的CSS文件中做到这一点，但我不确定这是最好的方法。

Answer 1

一种方法类似于以下内容：

import React from "react";
import ReactDOM from "react-dom";

import Grid from "@material-ui/core/Grid";

function App() {
  return (
    <Grid container>
      <Grid item xs={4}>
        {/* Intentionally Empty */}
      </Grid>
      <Grid container item xs={4} justify="center">
        <div>Search Panel</div>
      </Grid>
      <Grid container item xs={4} justify="flex-end">
        <div>Item Status Filter</div>
      </Grid>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是邓肯评论的总体思路。我已更改sm为xsjust 以便我可以在任何尺寸的屏幕上验证行为。最后，Material-UIGrid只是为CSS Flexbox 模型增加了一些便利，因此要知道如何使用它，Grid您需要了解如何在 CSS 中使用它。Grid添加的主要内容是针对不同屏幕尺寸以不同方式控制 12 列网格的简单响应方面。