flex布局如何左对齐并且间距相同

利用flex布局的时候,我们想让元素左对齐(flex-start)同时又想满足左右间距相同的效果(space-between),到底如何实现?

情况

我们想要的效果:
期望效果

实际问题:
我们只能满足一个排布需求,要么左对齐(右边多出的部分会很空),要么左右对齐(最后一排如果不排满,布局会左右对齐)


居左对齐

左右对齐

代码

具体怎么办啊?二者只能满足其一,得想办法解决才行

.room-container{
    display: flex;
    width: auto;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: scroll;
  }
  .room-container:after {
      content: "";
      flex: auto;
   }

搞定!

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

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,622评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,514评论 0 6
  • 2009年,W3C提出了一种新的方案--Flex布局,可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在...
    独行侠_ef93阅读 2,815评论 0 51
  • 传统的网页布局基于盒装模型,使用display,position,float属性来达成各种布局。对于一些特殊的布局...
    exialym阅读 2,648评论 0 11
  • 最近,公司在做筹备期第一阶段工作节点考核,3月31号之前,我有5个节点,从13号入职到今天,一共8个工作日...
    熊小会阅读 1,704评论 0 2