在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

效果圖如下：

clipboard.png

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

回答
編輯回答
拼未來(lái)
<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