求助：基于flex布局实现四列CSS棋盘格样式

没问题，我来帮你搞定这个四列flex棋盘格的需求！因为flex是一维布局，但通过flex-wrap: wrap我们可以模拟出网格效果，再结合CSS的:nth-child()选择器就能精准控制每个元素的颜色，完美实现棋盘格样式。

核心思路 #

• 父容器设置display: flex + flex-wrap: wrap，让子元素自动换行，形成四列多行的布局；
• 子元素设置flex: 0 0 25%（固定宽度占父容器的1/4），确保每行刚好4个元素；
• 利用:nth-child()的循环公式，按照两行8个元素的周期来分配颜色，保证上下左右相邻的元素颜色不同。

完整代码示例 #

<div class="flex-grid">
  <!-- 可添加任意数量子元素，行数自动生成 -->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.flex-grid {
  display: flex;
  flex-wrap: wrap;
  width: 400px; /* 可自定义宽度，或设为100%自适应 */
  gap: 0; /* 元素间无间隙，可根据需求调整 */
}

.flex-grid > div {
  flex: 0 0 25%; /* 每个元素占1/4宽度，刚好四列 */
  height: 100px; /* 自定义元素高度 */
  box-sizing: border-box;
  border: 1px solid #fff; /* 可选：添加白色边框区分元素 */
}

/* 棋盘格颜色规则：每8个元素为一个循环周期 */
.flex-grid > div:nth-child(8n+1),
.flex-grid > div:nth-child(8n+4),
.flex-grid > div:nth-child(8n+5),
.flex-grid > div:nth-child(8n+8) {
  background-color: #2d3748; /* 深色块 */
}

.flex-grid > div:nth-child(8n+2),
.flex-grid > div:nth-child(8n+3),
.flex-grid > div:nth-child(8n+6),
.flex-grid > div:nth-child(8n+7) {
  background-color: #e2e8f0; /* 浅色块 */
}

效果说明 #

• 第一行：深色 → 浅色 → 浅色 → 深色
• 第二行：浅色 → 深色 → 深色 → 浅色
• 第三行及后续重复上述规律，完全满足棋盘格“相邻元素颜色不同”的要求
• 子元素数量可任意增减，布局会自动适配行数

内容的提问来源于stack exchange，提问作者sandrooco