卡片展示（不定宽），最后一行左对齐 的几种实现方式

// antd采用24栅格， span={8}可根据分辨率自己调整

<Row gutter={16}>
  <Col span={8} />
  <Col span={8} />
  <Col span={8} />
</Row>

html:

<ul>
  <li>card 1</li>
  <li>card 2</li>
</ul>

css:

ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
li {
  flex: 1;
}

html

     <div>
        <ul>
          <li>card 1</li>
          <li>card 2</li>
          <li>card 3</li>
        </ul>
        <ul>
          <li>card 4</li>
          <li style={{visibility: ‘hidden‘}}>empty</li> // 占位li, 可根据数据格式动态扩展
          <li style={{visibility: ‘hidden‘}}>empty</li>
        </ul>
      </div>
           

css:

      div {
        width: 100%;
      }
      ul {
        display: flex;
        justify-content: space-between;
      }
      li {
         flex: 1;
      }

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>


.box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

.box:after {
    content: "";
    flex: auto;
 }