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

资料

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

实现方式

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

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

  • Pug 模板引擎的 HTML 代码

    
    
  • CSS 代码

    
    
  • 演示 Gif 图
使用 space-between 布局时,最后一行保持左对齐.gif

你可能感兴趣的:(使用 space-between 布局时,最后一行保持左对齐)