flex布局设置space-between，最后一行有缺省时如何左对齐

最新推荐文章于 2024-03-06 18:48:16 发布

djs0513

最新推荐文章于 2024-03-06 18:48:16 发布

阅读量2.8k

点赞数 2

分类专栏： web前端文章标签： css flex css3 html

原文链接：http://www.web315.net/doc/64.html

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用flex弹性布局，两端对齐是设置justify-content:space-between。但是当一行当中的元素有缺省时，不能自动靠左排列，视觉上不够美观，如下图所示：

space-between最后一行缺省不能左对齐
图示示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
  *{margin: 0;padding: 0;}
  .box {width: 400px;background: #1f1f1f;float: left;padding: 2%;}
  .flex {display: flex;flex-wrap: wrap;justify-content: space-between;}
  .item {width: 30%;height: 80px;margin-bottom:5%;background:#fff;list-style:none;text-align: center;line-height: 80px;font-size:20px;color:#333;}
  .item:nth-child(n+4) {margin-bottom: 0;}
</style>
</head>
<body>
<div class="box">
  <ul class="flex">
   <li class="item">1</li>
   <li class="item">2</li>
   <li class="item">3</li>
   <li class="item">4</li>
   <li class="item">5</li>
  </ul>
</div>
</body>
</html>

解决方法也很简单，为flex容器设置宽度与子元素相同的:after伪元素（2021-03-23更新：缺几个就等于几个子元素宽度，详见评论），以上面示例代码为例，样式中增加：

.flex:after {
    content:"";
    width:30%;
}

最终效果
space-between最后一行缺省左对齐
转载自：http://www.web315.net/doc/64.html

djs0513

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
flex布局设置space-between，最后一行有缺省时如何左对齐

使用flex弹性布局，两端对齐是设置justify-content:space-between。但是当一行当中的元素有缺省时，不能自动靠左排列，视觉上不够美观，如下图所示：图示示例代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> *{margin: 0;padding: 0
复制链接

扫一扫