卡片列表 React Material
Cards Lists React Material
我有一个非常简单的问题。我想从左到右列出卡片。我的问题是卡片现在位于中心,当我添加另一张卡片时,它会在下面加起来。我希望它是从左到右的样子。
请看这个代码框link
const useStyles = makeStyles(theme => ({
root: {
display: "flex",
justifyContent: "initial"
},
title: {
marginBottom: "30px"
},
header: {
marginBottom: "20px",
display: "flex",
alignItems: "center",
justifyContent: "space-between"
},
card: {
maxWidth: 300,
margin: "auto",
transition: "0.3s",
boxShadow: "0 8px 40px -12px rgba(0,0,0,0.3)",
"&:hover": {
boxShadow: "0 16px 70px -12.125px rgba(0,0,0,0.3)"
}
},
media: {
paddingTop: "56.25%"
},
content: {
textAlign: "left",
padding: theme.spacing.unit * 3
},
divider: {
margin: `${theme.spacing.unit * 3}px 0`
},
heading: {
fontWeight: "bold"
},
subheading: {
lineHeight: 1.8
},
avatar: {
display: "inline-block",
border: "2px solid white",
"&:not(:first-of-type)": {
marginLeft: theme.spacing.unit
}
}
}));
Material UI 通过 Grid 组件实现了一个非常棒的网格。只需将您的卡片包裹在 <Grid container>
中,如下所示:
<Grid container>
<Card className={classes.card}>
...
</Card>
</Grid>
我有一个非常简单的问题。我想从左到右列出卡片。我的问题是卡片现在位于中心,当我添加另一张卡片时,它会在下面加起来。我希望它是从左到右的样子。
请看这个代码框link
const useStyles = makeStyles(theme => ({
root: {
display: "flex",
justifyContent: "initial"
},
title: {
marginBottom: "30px"
},
header: {
marginBottom: "20px",
display: "flex",
alignItems: "center",
justifyContent: "space-between"
},
card: {
maxWidth: 300,
margin: "auto",
transition: "0.3s",
boxShadow: "0 8px 40px -12px rgba(0,0,0,0.3)",
"&:hover": {
boxShadow: "0 16px 70px -12.125px rgba(0,0,0,0.3)"
}
},
media: {
paddingTop: "56.25%"
},
content: {
textAlign: "left",
padding: theme.spacing.unit * 3
},
divider: {
margin: `${theme.spacing.unit * 3}px 0`
},
heading: {
fontWeight: "bold"
},
subheading: {
lineHeight: 1.8
},
avatar: {
display: "inline-block",
border: "2px solid white",
"&:not(:first-of-type)": {
marginLeft: theme.spacing.unit
}
}
}));
Material UI 通过 Grid 组件实现了一个非常棒的网格。只需将您的卡片包裹在 <Grid container>
中,如下所示:
<Grid container>
<Card className={classes.card}>
...
</Card>
</Grid>