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>


修改时间 2022-11-11

声明:本站所有文章和图片,如无特殊说明,均为原创发布,转载请注明出处。
随机推荐
WordPress 文章置顶循环
Node.js 控制台进度条实现原理
Nine 主题
JWT 存储在 Cookie 和 Web Storage 的区别
wp_signon() 自定义用户登录函数
在 HTML 中引入 CSS
什么是 XSS 攻击
JavaScript getter和setter