如何通过CSS flex设置WordPress网店移动端始终至少并排显示2张图片

操作步骤 #

1. 进入WordPress后台，依次点击「外观」→「自定义」→「额外CSS」
2. 将以下CSS代码粘贴到输入框中，保存发布即可生效

核心CSS代码 #

父容器设置（Flex布局基础） #

/* 以下默认适配Woocommerce默认商品/分类列表容器，自定义主题可替换为对应容器类名 */
ul.products, .category-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding: 0 8px !important;
}

子项宽度设置（保证2张并排） #

ul.products li.product, .category-grid .category-item {
  flex: 1 0 calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
  margin: 0 !important;
}

参数调整说明 #

• gap 控制两张图片之间的横向/纵向间距，可根据设计需求自定义数值
• calc(50% - 8px) 中的8px为gap值的一半，如果你把gap调整为20px，对应修改为calc(50% - 10px)即可
• 若你使用的主题商品/分类列表类名和默认不同，右键页面商品列表选择「检查」即可查看对应类名，替换代码中的选择器即可

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