css - 如何在 flex 容器中指定高度？

Question

我有一个柔性包装容器。在较小的屏幕上显示 5 列，在较大的屏幕上显示 10 列。如何指定行的高度，以便文本容器在两种情况下都是方形的，而不是文本的固有高度？我希望保持动态调整大小，因此在调整窗口大小时，方块会填满行。

https://codesandbox.io/s/fragrant-bird-gzvht?fontsize=14

更像这样：

而不是这个：

标签： cssreactjsmaterial-ui

Answer 1

给每个card一个固定的height和一个固定的width

[theme.breakpoints.up("sm")]: {
  backgroundColor: theme.palette.secondary.main,
  flexBasis: "9.5%",
  height: 60,
  width: 60,
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  margin: 5
}