如何在Next.js中使用flexbox动态实现3列3行可扩展网页布局？

算力阿峰

2026-10-2

你所提到的flexbox、React Bootstrap、纯CSS三种方案均可实现3列3行排列且支持后续扩展的动态布局需求，具体实现思路如下：

纯CSS实现

两种可选写法：

优先推荐CSS Grid实现，对规整的行列布局适配性更好，后续扩展列数/行数仅需修改1行配置即可，示例代码：

/* 布局容器样式 */
.grid-layout {
  display: grid;
  gap: 16px; /* 自定义行列间距 */
  grid-template-columns: repeat(3, 1fr); /* 固定3列，宽度均分 */
  grid-auto-rows: minmax(120px, auto); /* 行高最小120px，内容超出自动撑开 */
}
/* 布局子元素样式 */
.grid-item {
  /* 自定义子元素样式 */
}

如果要沿用当前使用的flexbox方案也可实现，通过换行控制每行展示数量：

/* 布局容器样式 */
.flex-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 自定义元素间距 */
}
/* 布局子元素样式 */
.flex-item {
  /* 3列布局宽度计算，减去间距偏移即可 */
  width: calc(33.333% - 11px);
}

React Bootstrap实现

直接使用React Bootstrap自带的栅格系统即可快速实现，Bootstrap默认12栅格，每个子元素占4格即可实现3列布局，新增元素会自动换行排列，后续扩展仅需修改列的占比数值：

import { Container, Row, Col } from 'react-bootstrap';

export default function MyLayout() {
  // 布局数据，新增项直接添加到数组即可自动适配布局
  const layoutItems = new Array(9).fill(null).map((_, index) => (
    <div key={index}>卡片内容{index + 1}</div>
  ));

  return (
    <Container>
      <Row gap={4}>
        {layoutItems.map(item => (
          <Col md={4}>{item}</Col>
        ))}
      </Row>
    </Container>
  )
}