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

Posted 2023-03-17

【中文标题】如何使用 flexbox 动态地进行 3 列 3 行的布局

【英文标题】：How to do a layout of 3 column of 3 rows dynamically with flexbox

【发布时间】：2021-11-21 14:38:03

【问题描述】：

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

【问题讨论】：

你能详细说明你的问题吗？为什么不使用 css-grid？或者在父行 flexbox 中使用列 flexbox。

我对 CSS 网格不是很熟悉。为了明确我的问题：我有一些节目是网站管理员需要能够每天添加的演出列表。为了尊重设计，我想重复3行3列……不知道是不是更清楚

您可以在父包装器上使用 columns:3

【参考方案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/

【讨论】：

我会试试的。我也尝试理解关于 css-tricks 的 CSS 网格文章。谢谢