美文网首页
flex布局如何左对齐并且间距相同

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

作者: AmazingMax | 来源:发表于2019-12-26 13:54 被阅读0次

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

    搞定!

    相关文章

      网友评论

          本文标题:flex布局如何左对齐并且间距相同

          本文链接:https://www.haomeiwen.com/subject/kdwkoctx.html