flex布局 justify-content：space-between; 解决最后一排数量不够自动

warmcheng 发布于2019-08-30 15:43 / 3351人阅读

摘要：布局两端对齐当最后一排数量不够时，会出现以下布局情况这时，我们可以下面伪类，解决最后一排数量不够两端分布的情况加上伪类，解决最后一排数量不够两端分布的情况最终效果，完美解决两端对齐布局混乱的情况当然，如果布局每列有个

flex 布局两端对齐当最后一排数量不够时，会出现以下布局情况

这时，我们可以下面after伪类，解决最后一排数量不够两端分布的情况

.tem-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    text-align: justify;
  }
  
  .tem-flex:after{
    content: "";
    width: 30%;
    border:1px solid transparent;
  }
  .tem-list{
    width:30%;
    border:1px solid #ff6600;
    margin-bottom: 10px;
  }

最终效果，完美解决两端对齐布局混乱的情况

当然，如果布局每列有4个，5个可以以此类推，举一反三

更多详细知识介绍请访问我的个人主页

idc机房托管混合云 flex布局 js滚动条到最后数据自动加载自动布局 php自动数量加减

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116011.html

新手flex布局入门篇，看这篇文章就够了

摘要：提纲介绍盒子模型什么是基础项目实战视频源码链接介绍参考文档什么是层叠样式表是层叠样式表的缩写。布局简称，布局是中一种新的布局模式，用于改进传统模式中标签对齐方向以及排序等等缺陷。主要用设置在容器里面严着主轴的排列方式。提纲 CSS介绍盒子模型什么是flexbox flex-direction flex-wrap flex-flow justify-content align-i...

xinhaip 2019-08-05 17:55 评论0 收藏0
新手flex布局入门篇，看这篇文章就够了

摘要：提纲介绍盒子模型什么是基础项目实战视频源码链接介绍参考文档什么是层叠样式表是层叠样式表的缩写。布局简称，布局是中一种新的布局模式，用于改进传统模式中标签对齐方向以及排序等等缺陷。主要用设置在容器里面严着主轴的排列方式。提纲 CSS介绍盒子模型什么是flexbox flex-direction flex-wrap flex-flow justify-content align-i...

Lionad-Morotar 2019-08-29 12:51 评论0 收藏0
前端基本功-响应式布局(flex)

摘要：属性定义了多根轴线的对齐方式。负值对该属性无效。属性允许单个项目有与其他项目不一样的对齐方式，可覆盖属性。默认值为，表示继承父元素的属性，如果没有父元素，则等同于。本文主要记录一些自己遇见的flex布局案例简单回顾一下flex常用属性 6个常用的容器属性 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 f...

xuexiangjys 2019-08-30 15:55 评论0 收藏0
flex布局的温故学习

摘要：需要注意的是当时设置布局之后，子元素的的属性将会失效。各行向弹性盒容器的中间位置堆叠。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。各行将会伸展以占用剩余的空间。 flex的简介在flex的容器中默认存在两条轴，水平主轴main axis和垂直交叉轴cross axis，这是默认的设置，不过我们可以通过设置将主轴的方向变成垂直方向，交叉轴变成水平方向。在一...

Aldous 2019-08-30 11:12 评论0 收藏0
flex 弹性布局

摘要：高度要撑开横排换行产生多轴尝试添加代码可以说，布局在父元素上对子元素垂直方向的控制还是非常到位和明确的子元素属性探究大概可以理解为子元素的排队号码，默认都是，越大排队越后可以看到，号因为设置为排到了后面而号因为更加大的而排到最后。案例基础布局 html css .box{ ...

Caicloud 2019-08-30 14:17 评论0 收藏0