React JS + Material UI : 在可变宽度的容器内显示 N 个元素
React JS + Material UI : displaying N elements inside a container of variable width
我想做的应该是非常简单的事情，但我似乎仍然无法用 Material UI (ReactJS):
我有一个 Card 元素，它显示一些图像、标题、说明和一些按钮。该元素具有固定的宽度和高度。
我想在宽度可能不同的容器元素中一个接一个地显示 N 个元素。
因此，如果容器元素的宽度为 1000px，而 Card 元素的宽度为 250px，它将连续显示 4 个 Card 元素。如果我然后为容器设置 500px 的宽度，它应该在一行中显示 2 个 Card 元素，在新行中显示下面的其他 2 个元素。
大约十年前，当我还在做 html+css 时，我曾经使用具有特定宽度的 DIV 和其他一些浮动的 DIV s 在里面 - 也有固定宽度 - 它会以我解释的这种方式呈现......我的意思是，一行中的“溢出”会自动转到下面的行。
我尝试了很多不同的东西，我也搜索了相册教程之类的，但仍然无法完成...
我应该如何用 Material UI 和 ReactJS 做这种事情？
提前致谢！
您可以使用 flex-box 来处理这类问题。这里我做了一个简单的例子，只使用了几个符合我们描述的属性：https://codesandbox.io/s/throbbing-cdn-cbb6mx?file=/src/App.js
在这个 link 中，您可以找到关于 flex-box 的非常好的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
我想做的应该是非常简单的事情，但我似乎仍然无法用 Material UI (ReactJS):
我有一个 Card 元素，它显示一些图像、标题、说明和一些按钮。该元素具有固定的宽度和高度。 我想在宽度可能不同的容器元素中一个接一个地显示 N 个元素。
因此，如果容器元素的宽度为 1000px，而 Card 元素的宽度为 250px，它将连续显示 4 个 Card 元素。如果我然后为容器设置 500px 的宽度，它应该在一行中显示 2 个 Card 元素，在新行中显示下面的其他 2 个元素。
大约十年前，当我还在做 html+css 时，我曾经使用具有特定宽度的 DIV 和其他一些浮动的 DIV s 在里面 - 也有固定宽度 - 它会以我解释的这种方式呈现......我的意思是，一行中的“溢出”会自动转到下面的行。
我尝试了很多不同的东西，我也搜索了相册教程之类的，但仍然无法完成...
我应该如何用 Material UI 和 ReactJS 做这种事情？
提前致谢！
您可以使用 flex-box 来处理这类问题。这里我做了一个简单的例子，只使用了几个符合我们描述的属性：https://codesandbox.io/s/throbbing-cdn-cbb6mx?file=/src/App.js
在这个 link 中，您可以找到关于 flex-box 的非常好的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/