如何使用 flexbox 动态地进行 3 列 3 行的布局

Question

我需要在 nextjs 上动态做一个布局，3 列 3 行，依此类推。 其实我用的是flexbox。是否可以仅使用 flexbox、Reactbootstrap 或一些 CSS 来做到这一点？

Answer 1

为了通过自动换行实现基本的 3x3 形状，我将使用一个简单的 css flexbox：

• flex-direction: column
• flexwrap: wrap
• （并限制高度以决定项目开始包装的位置） 然后要实现多个 3x3，我认为没有办法在纯 css 中做到这一点，但您可以使用 js（反应端）简单地将项目列表分成 9 个组，并像我之前所说的那样多次渲染 3x3。

关于 flexbox 的更多信息，我推荐关于它的 css-tricks 文章： https://css-tricks.com/snippets/css/a-guide-to-flexbox/