资料

让CSS flex布局最后一行列表左对齐的N种方法 — 张鑫旭博客

实现方式

引用的资料中各种情况包含的实现方式基本都是有的，这里只记录一下我自己所使用的到的方式——“如果每一行列数不固定”

“如果每一行的列数不固定，则上面的这些方法均不适用，需要使用其他技巧来实现最后一行左对齐。
这个方法其实很简单，也很好理解，就是使用足够的空白标签进行填充占位，具体的占位数量是由最多列数的个数决定的，例如这个布局最多7列，那我们可以使用7个空白标签进行填充占位，最多10列，那我们需要使用10个空白标签。”

  • Pug 模板引擎的 HTML 代码
  1. <template lang="pug">
  2. .data-list
  3.   .data-item(v-for="item in dataListData" :key="item.id")
  4.   i
  5.   i
  6.   i
  7. </template>
  • CSS 代码
  1. <style lang="stylus" scoped>
  2. .data-list
  3.   padding 10px 0 5px
  4.   display flex
  5.   flex-wrap wrap
  6.   justify-content space-between
  7.   align-content baseline
  8.   min-height 100 * 4 + 14 * 4 + 10 * 2
  9.   margin-right -16px
  10.   &>i
  11.     width (264 / (853 - 16 * 2) * 100)%
  12.     margin-right auto
  13.   .data-item
  14.     max-width (264 / (853 - 16 * 2) * 100)%
  15.     min-width 100px
  16.     flex 1 1 (264 / (853 - 16 * 2) * 100)%
  17.     height 100px
  18.     cursor pointer
  19.     margin 0 auto 14px 0
  20. </style>
  • 演示 Gif 图

使用 space-between 布局时，最后一行保持左对齐.gif