flex布局多行两端对齐中间等间距解决方案

5,415 阅读1分钟

又是一个百无聊赖的下午,我正在愉快的摸鱼,突然学妹滴滴我:

原来她碰到了一个这样的需求。

我想都没想,甩出一句justify-content: space-between;

然而这并没有解决她的需求

由于后台返回的数据个数是不确定的,在多行情况下会出现这样的结果。

聪明秃顶的我摸了摸自己的脑袋,有点凉。好在学妹提醒了我一下:

我当即拍了拍脑袋,想到了解决方案:

  .box:after{
     content: '';
     width: 400px;
   }

在结尾加一个没有高度空元素,宽度和之前元素一样即可。

解决了学妹的需求,我又愉快的摸起鱼来。