如何利用Flexbox实现移动端产品盒子两两并排布局？

必须使用Media Query——因为你需要在特定屏幕尺寸下覆盖默认的布局规则，从1上3下的异常布局改成两两并排的预期效果。下面是两种常用布局方案的具体操作：

方案一：使用Flexbox布局 #

先写基础的全局布局样式，再通过Media Query针对小屏幕调整：

HTML结构示例 #

<div class="product-container">
  <div class="product-box">产品1</div>
  <div class="product-box">产品2</div>
  <div class="product-box">产品3</div>
  <div class="product-box">产品4</div>
</div>

CSS代码 #

/* 基础样式：大屏幕下的布局（可根据需求调整） */
.product-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 盒子间的间距，避免挤在一起 */
  padding: 0 1rem;
}

.product-box {
  flex: 1 1 22%; /* 大屏幕每行约4个盒子，可根据需求调整占比 */
  min-width: 200px; /* 设置最小宽度，防止屏幕过宽时盒子被拉得太窄 */
  padding: 1rem;
  border: 1px solid #eee;
}

/* 小屏幕断点：这里以768px为例，可根据你的设计需求修改 */
@media (max-width: 768px) {
  .product-box {
    flex: 1 1 45%; /* 每行两个盒子，45%的宽度加gap刚好占满一行 */
    min-width: 150px; /* 移动端适配更小的最小宽度 */
  }
}

方案二：使用Grid布局 #

Grid实现起来更直观，直接控制列数即可：

CSS代码 #

/* 基础样式：大屏幕自适应布局 */
.product-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 0 1rem;
}

.product-box {
  padding: 1rem;
  border: 1px solid #eee;
}

/* 小屏幕断点 */
@media (max-width: 768px) {
  .product-container {
    grid-template-columns: repeat(2, 1fr); /* 强制每行显示2列 */
    /* 也可以用 auto-fit 适配：grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
  }
}

关键注意事项 #

• 断点值（max-width）要根据你的产品设计来定，比如针对手机可以设为480px，平板设为768px。
• 如果原来出现1个盒子单独占一行的情况，要检查该盒子是否有flex: 0 0 100%或grid-column: 1/-1这类强制占满整行的样式，需要在Media Query里把这些规则覆盖掉。
• 记得给盒子设置合理的内边距和间距，保证移动端显示美观。

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