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

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;
   100%;
}
li {
  flex: 1;
}

2.2 多行数据

　　加占位标签， 使用隐藏的div 填满每行：

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 {
         100%;
      }
      ul {
        display: flex;
        justify-content: space-between;
      }
      li {
         flex: 1;
      }

 　　或利用flex属性， 

flex: 1; 
flex-grow: 0;    // 禁止div放大
flex-basis: calc((100% -45px) / 4)；   //  4表示每行4个卡片； 45px 则是每个卡片间的间隙为15px， 最后一个卡片没有边距， 因此15px * 3 = 45px

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