如何在CSS中使用flex精确实现两行三列固定网格排列？

使用flexbox实现两行三列的固定网格，核心在于将容器设为`display: flex`并配合`flex-wrap: wrap`，同时为子元素设置固定的宽度（如33.33%）和高度。这种方法通过控制换行来强制形成多行布局，适用于需要响应式调整但保持特定行列结构的场景。

如何确保每行严格包含三个项目且自动换行？

要确保每行严格包含三个项目，必须给每个子项设置宽度为总宽度的三分之一（33.3333%），并利用`box-sizing: border-box`防止边框或内边距导致溢出换行。当第四个项目出现时，由于宽度总和超过100%，它会自动折行到下一行，从而形成新的行。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

.grid-container {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
}

.grid-item {
  flex: 0 0 33.3333%;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

如果项目数量不是三的倍数，布局会如何表现？

如果项目数量不是三的倍数，例如只有5个项目，前两个项目占据第一行，中间两个占据第二行，最后一个项目单独占据第三行的起始位置。Flexbox不会强制填满最后一行，而是让剩余空间留在右侧，除非使用`justify-content`等属性进行额外对齐处理。

立即学习“前端免费学习笔记（深入）”；