资料
实现方式
引用的资料中各种情况包含的实现方式基本都是有的，这里只记录一下我自己所使用的到的方式——“如果每一行列数不固定”
“如果每一行的列数不固定，则上面的这些方法均不适用，需要使用其他技巧来实现最后一行左对齐。
这个方法其实很简单，也很好理解，就是使用足够的空白标签进行填充占位，具体的占位数量是由最多列数的个数决定的，例如这个布局最多7列，那我们可以使用7个空白标签进行填充占位，最多10列，那我们需要使用10个空白标签。”
-
Pug模板引擎的HTML代码<template lang="pug"> .data-list .data-item(v-for="item in dataListData" :key="item.id") i i i </template> -
CSS代码<style lang="stylus" scoped> .data-list padding 10px 0 5px display flex flex-wrap wrap justify-content space-between align-content baseline min-height 100 * 4 + 14 * 4 + 10 * 2 margin-right -16px &>i width (264 / (853 - 16 * 2) * 100)% margin-right auto .data-item max-width (264 / (853 - 16 * 2) * 100)% min-width 100px flex 1 1 (264 / (853 - 16 * 2) * 100)% height 100px cursor pointer margin 0 auto 14px 0 </style>
- 演示 Gif 图
使用 space-between 布局时，最后一行保持左对齐.gif
