如何用自定义CSS实现WordPress区块每行仅显示4列？

问题原因 #

你当前的CSS代码中，.column的flex: 25px设置错误。flex属性的缩写格式为flex: <flex-grow> <flex-shrink> <flex-basis>，仅写25px只会把元素的基准宽度设为25px，无法实现每行4列的宽度分配，导致换行逻辑失效。

修正方案 #

以下是两种实用的CSS实现方案，可根据实际需求选择：

方案1：无间距的4列布局

.products {
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
  /* 可选：让容器水平居中 */
  margin: 0 auto;
}

.column {
  /* 固定占比25%，不放大不缩小 */
  flex: 0 0 25%;
  width: 25%;
  /* 确保内边距不额外增加宽度 */
  box-sizing: border-box;
  /* 可选：添加内边距美化卡片 */
  padding: 10px;
}

方案2：带间距的4列布局（更贴合实际场景）

如果需要卡片之间保留间距，直接设置25%宽度会导致总宽度超出容器，可通过以下两种方式解决：

方法A：使用flex gap属性（推荐，代码简洁）

.products {
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
  /* 设置列与列、行与行的间距 */
  gap: 15px;
}

.column {
  /* 计算每列实际宽度：(总宽度 - 3个间隙)/4 */
  flex: 0 0 calc(25% - 11.25px);
  width: calc(25% - 11.25px);
  box-sizing: border-box;
  padding: 10px;
}

方法B：兼容旧浏览器的margin写法

.products {
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
  /* 负margin抵消子元素的左间距 */
  margin-left: -15px;
}

.column {
  flex: 0 0 25%;
  width: 25%;
  box-sizing: border-box;
  padding: 10px;
  /* 设置左间距 */
  margin-left: 15px;
  /* 可选：设置底部行间距 */
  margin-bottom: 15px;
}

额外优化（响应式适配） #

如果需要移动端自动调整列数，可添加媒体查询：

@media (max-width: 768px) {
  .column {
    flex: 0 0 50%;
    width: 50%;
  }
}

@media (max-width: 480px) {
  .column {
    flex: 0 0 100%;
    width: 100%;
  }
}

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