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

针对此属性 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按照顺序排下去，请问如何修改

---

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

---

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