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

Question

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

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

更多类似这样的内容:

取而代之的是:

Answer 1

给每张卡片一个固定的高度和一个固定的宽度

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