鍍金池/ 問答/HTML/ 5個flex項(xiàng)怎么等比例排兩行，第2行只顯示前2個？

5個flex項(xiàng)怎么等比例排兩行，第2行只顯示前2個？

效果圖如下：

clipboard.png

像這種一行是3個，每個flex項(xiàng)占主軸空間是33.3333%，所以我劃分了2個橫向的flex容器作為上一個縱向的flex項(xiàng)，現(xiàn)在的問題就是第2行怎么實(shí)現(xiàn)前2個flex項(xiàng)的排列（如果不限定flex項(xiàng)的寬度的話，以為不能整除），我現(xiàn)在是在第2行后面加了一個空的flex項(xiàng)，然后用flex：1等比例放大的，但多了一個空的div，求大佬指教更好的辦法。

回答
編輯回答
拼未來
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<style>
  .row {
    width: 300px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .col{
    flex: 0 0 33.333333%;
    height: 80px;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
  }
</style>
2017年10月25日 23:28