reactjs 是否有方法将MUI GRID元素与flex-start对齐？

bz4sfanl 于 5个月前发布在 React

关注(0)|答案(1)|浏览(63)

我尝试使用justify属性将我的主MUI网格居中，该属性将网格居中，但也将其中的项目居中。我希望我的网格元素以flex-start对齐，而不是与网格居中对齐。但是，align-item属性在MUI网格上不起作用。
我做错了什么？
App.js

<Container maxWidth="xl" style={{ marginTop: '50px' }}>
      <Grid container spacing={isMobile ? 1 : 8} className="grid-container" justifyContent="center">
        {[0, 1, 2, 3, 4, 5].map((value) => (
          <Grid key={value} item xs={6} sm={5} md={4} xl={2.6} lg={4}>
            <Box display="flex" justifyContent="center">
              <div style={{ alignSelf: 'flex-start', width: '100%' }}>
                <NavLink to={`/shoepage/${value}`} style={{ textDecoration: 'none' }}>
                  <Igrid />
                </NavLink>
              </div>
            </Box>
          </Grid>
        ))}
      </Grid>
    </Container>

字符串

reactjs

来源：https://stackoverflow.com/questions/77747222/is-there-a-way-to-align-mui-grid-elements-to-flex-start

1条答案

按热度按时间

hec6srdp1#

MUI中的Grid组件不呈现display: grid，也不呈现flex。Grid的spacing属性会破坏样式，因为它添加了一个负边距。在这里阅读。所以，问题在于当你使用间距属性时它添加的填充。这里是一个没有间距的基本示例：

const { Box, Grid } = MaterialUI;

function App() {
  return (
    <div className="App">
      <Grid
        container
        style={{
          border: "1px solid red",
          justifyContent: "center",
        }}
      >
        {[0, 1, 2, 3, 4, 5].map((value) => (
          <Grid
            key={value}
            item
            xs={6}
            sm={5}
            md={4}
            lg={4}
            style={{
              border: "1px solid blue",
              // justifyContent: "flex-start",
            }}
          >
            <Box>
              <div style={{ alignSelf: "flex-start", width: "100%" }}>
                {value}
              </div>
            </Box>
          </Grid>
        ))}
      </Grid>
    </div>
  );
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

个字符

赞(0）回复(0）举报 5个月前

我来回答

reactjs 是否有方法将MUI GRID元素与flex-start对齐？

1条答案

相关问题

热门标签

最新问答