小编mid*_*idu的帖子

我有一个<ul>flex-box和一堆<li>s里面的flex-items.

我试图让它<li>具有灵活的宽度,使用最小宽度和最大宽度保持两种尺寸.只要它们在同一条线上,它就能很好地工作.但是,当它们换<li>行时,新行上的s会尽可能多地使用空间.这意味着它们在第一行很小,而在第二行很小,只有少数几行.

有没有办法告诉flexbox在包装后保持项目的宽度,同时保持灵活的宽度？

包装演示:

我的代码看起来像这样:

<ul>
  <li>
    <figure>
      <img src="http://placekitten.com/g/250/250">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/100/100">
    </figure>
  </li>
  <!-- ... -->
</ul>

而CSS:

ul {
  display: flex;
  flex-wrap: wrap;
}

  li {
    min-width: 40px;
    max-width: 100px;
    flex: 1 0 0;
  }

这是一个关于codepen的实例,带有一些额外的注释,调整窗口大小以查看它的包装.