display:flex 中 justify-content: space-between方法的排版问题

Question

针对此属性 justify-content: space-between 3个元素为一行排列，最后多余的两个多余的元素如何让它靠左排布，事实上是左右排布了，表面看就是中间空了个元素，请看demo<div class="container">

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span></div>

.container {width: 400px;display:flex;justify-content: space-between;flex-flow: row wrap;}

span {width: 110px;background-color: #f60;border-radius: 5px;margin-top: 10px;padding: 10px;
}

这个其实是此属性应有的效果 但是我想做到span按照顺序排下去，请问如何修改

Answer 1

.container::after {
  content: "";
  width: 130px;
}

Answer 2

1. 方法一：
   给.container加一个:after伪元素：

   .container:after {
     content: "";
     flex: auto;
   }
   

2. 方法二：
   在列表结尾增加一系列空值：

   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>

   在css里做如下定义：

   li:empty {
       height: 0;
       border: none;
   }
   

Answer 3

我也遇到这个问题了，不过我的解决办法是这样的：
container 不变，
span 的宽度通过 calc()来计算，减去margin(这里可以微调试试)

span{
    width: calc(20% - 20px);
    margin:0 18px 20px 0;
}

但我这个唯一缺点就是，container 变宽时，span也会相应变宽，

其他效果还行。