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

2019-12-26  本文已影响0人  AmazingMax

利用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;
   }

搞定!

上一篇下一篇

猜你喜欢

热点阅读