制作ul包装的挠曲盒
制作ul包装的挠曲盒
提问于 2022-10-25 04:13:36
目前，我的代码看起来是这样的。
HTML
return (
<Card {...props} className={` ${classes.root} ${rootClassName}`} onClick={onClick}>
{children}
<div className={classes.box}>
<ul>
{props.pizzas?.toppings?.map((topping) => (
<li key={topping.id} className={classes.list}>{topping.name}</li>
))}
</ul>
</div>
</Card>
);CSS
const useStyles = makeStyles((theme: Theme) => ({
root: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
padding: theme.spacing(2, 2, 2),
height: theme.typography.pxToRem(500),
'&:hover': {
cursor: 'pointer',
},
},
box: {
height: '300px',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
},
list: {
flex: '0 0 70px',
}
}));我的名单看上去像下面的图片。我想要列表包装，如果有空间，没有相互重叠，如果底部有空间，现在有堆叠在一起，如果有更多的顶部。
谢谢!
回答 1
Stack Overflow用户
发布于 2022-10-28 14:25:47
对于遇到类似问题的人，我就是这样解决的。
column1: {
columns: '1',
width: '300px',
},
column2: {
columns: '2',
width: '500px',
},
column4: {
columns: '5',
width: '800px',
},我用了柱子
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74189062
复制相关文章
相似问题
腾讯云开发者
