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

1. 栅格布局

　　栅格布局常见有12，或24栅格，根据每个div的栅格数量，得到宽度占比。 

　　平时可以利用一些栅格布局组件， 如antd的Row，Col

　　

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

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

2. 弹性布局

　2.1 单行数据　

html:

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

css:

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

2.2 多行数据

不加占位标签：

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;
      }

2.3 每行列数固定， 可用

<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;
 }