Angular双列订单列表无偏移展示及奇数项布局修复方案请求

场景 #

需以双列形式展示订单列表，当前使用<ul>和<li>标签实现，现有代码如下：

app.component.html #

<div class="order-list">
  <ul>
    <li>
      <div class="order-wrap">
        <span>25-02-2019</span>
        <div class="order-container">
          <span>Order ID : 1   </span>
          <a href="#">Download PDF</a>
        </div>
      </div>
    </li>
    <li>
      <div class="order-wrap">
        <span>25-02-2019</span>
        <div class="order-container">
          <span>Order ID : 2   </span>
          <a href="#">Download PDF</a>
        </div>
      </div>
    </li>
    <li>
      <div class="order-wrap">
        <span>25-02-2019</span>
        <div class="order-container">
          <span>Order ID : 3   </span>
          <a href="#">Download PDF</a>
        </div>
      </div>
    </li>
    <li>
      <div class="order-wrap">
        <span>25-02-2019</span>
        <div class="order-container">
          <span>Order ID : 4    </span>
          <a href="#">Download PDF</a>
        </div>
      </div>
    </li>
  </ul>
</div>

app.component.scss #

.order-list {
  width: 600px;
  .order-wrap {
    width: 250px;
    background-color: aliceblue;
    margin: 2px;
    .order-container {
      display: flex;
      flex-direction: row;
    }
  }
}

当前输出 #

问题 #

当订单数量为奇数（1、3、5等）时，UI布局错乱，Order ID与下载链接会偏移到另一行，示例：

客户期望所有订单内容（订单日期、Order ID、下载链接）都处于同一容器内，样式参考：

同时要求订单数量较多时显示垂直滚动条。

代码修改建议 #

1. 调整SCSS样式，实现稳定双列布局与滚动效果 #

核心通过Flexbox布局确保每个订单容器的独立性，同时添加滚动控制：

.order-list {
  width: 600px;
  max-height: 400px; // 可根据需求自定义最大高度
  overflow-y: auto; // 内容超出时显示垂直滚动条
  padding: 0;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px; // 替代margin，更规整的间距控制
  }

  .order-wrap {
    width: calc(50% - 4px); // 减去gap的一半，确保双列完美适配容器宽度
    background-color: aliceblue;
    padding: 8px; // 增加内边距优化视觉体验
    box-sizing: border-box; // 确保padding不额外撑宽容器

    .order-container {
      display: flex;
      justify-content: space-between; // 让Order ID和下载链接两端对齐
      margin-top: 4px;
    }
  }
}

2. HTML结构无需修改 #

现有<ul>和<li>的层级结构可直接保留，样式调整后即可满足需求。

修改说明 #

• flex-wrap: wrap让列表项自动换行，双列布局不受订单数量奇偶影响
• width: calc(50% - 4px)保证每个订单容器占满半列，同时适配间距
• overflow-y: auto + max-height组合实现滚动功能
• justify-content: space-between优化Order ID与下载链接的排版
• box-sizing: border-box避免内边距破坏容器宽度计算

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