[英]React Material UI Grid Horizontally Align Items for Containers With Different Number of Items
I am using the React Material UI Grid System to align my elements on the page which uses flexboxes internally.我正在使用 React Material UI Grid System 来对齐我在内部使用 flexbox 的页面上的元素。
Everything works great but I cannot figure out how to horizontally align items when the containers contain a different number of items.一切正常,但当容器包含不同数量的项目时,我无法弄清楚如何水平对齐项目。
In the following example , I have 2 container items that take a width of 6 each.在以下示例中,我有 2 个容器项,每个项的宽度为 6。 The first one contains items
x1
and x2
and the second container contains the items y1
, y2
and y3
.第一个包含项目
x1
和x2
,第二个容器包含项目y1
、 y2
和y3
。 As you can see, the way it looks right now is a little bit odd.如您所见,它现在的样子有点奇怪。 I want
x1
horizontally aligned with y1
and the same goes for x2
and y2
.我希望
x1
与y1
水平对齐, x2
和y2
。
The reason why I placed x1
, x2
in the first container and y1
, y2
, y3
in the second container is because they semantically belong together.我将
x1
, x2
放在第一个容器中,将y1
, y2
, y3
放在第二个容器中的原因是因为它们在语义上属于一起。 Thus, I can give the outer container different xs
, sm
, md
, lg
, xl
values and if it hits the breakpoint, they will still show up in the correct order.因此,我可以给外部容器不同的
xs
、 sm
、 md
、 lg
、 xl
值,如果它遇到断点,它们仍然会以正确的顺序显示。
However, if I simply place them in 3 rows with 2 columns each, they will break in the order x1
, y1
, x2
, y2
, ... That would obviously not be right.但是,如果我只是将它们分成 3 行,每行 2 列,它们将按照
x1
、 y1
、 x2
、 y2
的顺序断开……这显然是不对的。
Therefore, my question is, how can I horizontally align them?因此,我的问题是,如何水平对齐它们?
Edit:编辑:
This is how it looks right now:这是它现在的样子:
This is how it want it to look like:这是它想要的样子:
We want to add props to the <Grid>
to make this possible.我们想向
<Grid>
添加道具以使其成为可能。
alignItems="flex-start"
will allow grid items to stick to the top then fall towards the bottom. alignItems="flex-start"
将允许网格项目粘在顶部然后落到底部。direction="column"
will change the flow of how items are "stacked" in a sense.direction="column"
将改变项目如何“堆叠”的流程。 This will change the sizing of the container and items that it is attached to so expect some xs={12}
to turn into xs={6}
and vice versa.xs={12}
变成xs={6}
,反之亦然。 Here's the example code below as well as its implementation via sandbox.这是下面的示例代码以及它通过沙箱的实现。
import "./styles.css";
import { Grid } from "@material-ui/core";
export default function App() {
return (
<div className="App">
<Grid alignItems="flex-start" container spacing={1}>
<Grid container direction="column" item xs={6} spacing={1}>
<Grid item xs={12} style={{ border: "1px solid black" }}>
x1
</Grid>
<Grid item xs={12} style={{ border: "1px solid black" }}>
x2
</Grid>
</Grid>
<Grid container direction="column" item xs={6} spacing={1}>
<Grid item xs={12} style={{ border: "1px solid black" }}>
y1
</Grid>
<Grid item xs={12} style={{ border: "1px solid black" }}>
y2
</Grid>
<Grid item xs={12} style={{ border: "1px solid black" }}>
y3
</Grid>
</Grid>
</Grid>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.