Flex 布局 space-between 最后一行左对齐最佳实践

在使用 flex 布局时,设置 justify-content: space-between,如果一行有三个 div,那最后一行如果不满三个元素,就会出现下面的情况,如何使最后一个 div 向左对齐呢。有两种方法:


方法一:

这种方法的缺点是,最后一个 div 左外边距是0。

div:after {
  content: "";
  flex: auto;
}


方法二:

创建几个空的 div,貌似这种方法最合适了

<div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item-empty"><!--空 DIV--></div>
 </div>


真诚赞赏,手留余香
赞赏
随机推荐
Hls.js 播放 m3u8
Sublime Text 3为新的扩展文件类型实现语法高亮
JS事件冒泡与捕获、addEventListener--实例演示
跟Github学习设计不符合 CRUD 情况的RESTful API
SVG,字体图标的替代者
thinkphp5 json_decode 函数解析 json 结果为 NULL 的解决方法
Nodejs连接MySQL
阿里云 OSS 只授权一个用户控制 Bucket【OSS 细粒度的权限控制】
20170115 数位板 起步
X-sendfile 大文件下载解决方案