解决flex布局中使用 justify-content: space-between; 出现的bug

当我们使用flex布局时,会使用到平分间距 justify-content: space-between;

就会出现下面这样的bug

最后一排如果不满三个div,就会这样

这个时候,只需要在父级元素使用一个伪类就能解决 :after{content:'',flex:1;}


正常图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,584评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,703评论 0 26
  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 5,094评论 0 9
  • 应用在父元素上-flex box 1. 模型 display: flex(盒子模型) 定义父元素为flex元素 2...
    诺CIUM阅读 1,541评论 0 16
  • 利用UIColor展现 #F6F6F6 这个传统的颜色 F6F6F6 为一个 16 进制表示的RPG颜色,所以,需...
    阿兹尔阅读 284评论 0 0