如何使用map配合flexbox实现卡片并排自动换行，当前卡片仅垂直堆叠

问题根源 #

• 核心逻辑错误：你将cards flex容器放在了订单遍历的map函数内部，每一个订单都会生成独立的cards容器，单个容器内只有1张卡片，自然无法实现多卡片并排布局
• HTML语法错误：<p>标签属于块级文本元素，禁止嵌套其他<p>标签，浏览器会自动拆分你的嵌套结构，可能导致样式失效

修正方案 #

1. 调整JSX结构 #

把cards容器移到map循环外部，仅生成一次，所有card都作为该容器的直接子元素：

render() {
  return(
    <div>
      <button onClick={this.handleButtonClick}></button>
      <h1>orders are:</h1>
      {/* cards容器移到map外部，全局仅生成一次 */}
      <section class="cards">
        {this.state.orders.map((order) => (
          <article class="card">
            {/* 嵌套p改为div，符合HTML语法规范 */}
            <div class="left">                  
              <p>Crust: {order.Crust}</p>
              <p>Flavor: {order.Flavor}</p>
              <p>Size: {order.Size}</p>
              <p>Table Number: {order.Table_No}</p>
            </div>
          </article>
        ))}
      </section>
    </div>
  );
}

2. 调整对应CSS #

补充边距控制逻辑，同时适配结构调整，还可以增加响应式规则适配不同屏幕：

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* 补充卡片行列间距，避免边距计算错乱 */
  gap: 1em;
  padding: 0 1em;
}

.card {
  flex: 0 1 calc(25% - 1em);
  /* 可选：补充卡片基础样式，视觉效果更清晰 */
  border: 1px solid #e5e7eb;
  padding: 1em;
  border-radius: 8px;
}

/* 选择器从p.left改为div.left，适配结构调整 */
div.left {
  text-align: left;
  margin-left: 10%;
}

/* 可选：响应式适配，小屏幕自动调整卡片每行数量 */
@media (max-width: 768px) {
  .card {
    flex: 0 1 calc(50% - 1em);
  }
}
@media (max-width: 480px) {
  .card {
    flex: 0 1 100%;
  }
}

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