换行列表响应屏幕宽度

Question

我怀疑这是一个javascript技巧，但请随时告诉我，有一种纯CSS方式可以做到这一点。

我有一个项目列表（在本例中为图片），我希望在网格布局中显示。 我的要求很简单：

• 每个项目之间的等间距
• “对齐”对齐，即一行的第一个元素向左移动，最后一个元素向右移动。
• 每行的商品数量会根据网页宽度而变化。

我尝试了一些但每个都有一些问题：

• li.item { padding-right: somepx; } li.item:nth-child { padding-right: 0px; }
  • nth-child需要随着屏幕尺寸的变化而改变。
• li.item { padding-left: some/2px; padding-right: some/2px; }
  • 第1个和最后一个项目不会粘在边缘。

正如您所看到的，我只能实现上述3个要求中的2个，任何可以启发我的跨浏览器兼容性好的技巧？

谢谢！