如何保持一行HTML项目流畅，但确保每行具有相同的元素

Question

我在父元素中有一组6个元素。 6个元素需要足够流畅，当它们的父元素最短时，元素堆叠成6行1。当父元素被拉伸时，它们开始均匀堆叠，因此唯一可能的组合将是6行1,2行3行，3行2行或1行6行。

我有一个JSBin，我一直试图证明这一点，但收效甚微; http://jsbin.com/mawomu/2/edit

Answer 1

使用@media

完成@deebs建议

http://jsbin.com/jehequna/1/edit

这非常“不稳定”，因为它取决于边框，边距和填充宽度。

@media screen and (min-width: 330px){
  .items li
    {
      min-width: 100px; 
    }  
}
@media screen and (min-width: 363px){
  .items li
    {
      min-width: 113px; 
    }  
}
@media screen and (min-width: 477px){
  .items li
    {
      min-width: 151px; 
    }
}
@media screen and (min-width: 630px){
  .items li
    {
      min-width: 100px; 
    }
}