除最后一行外，将项目均匀分布在一行中[重复]

Question

我想弄清楚是否有办法将最后一行与中心对齐。在下面的 JsFiddle 中，您将看到，当您调整屏幕大小时，div 会调整连续显示的数量以及它们周围的均匀空间。除了最后一行也做同样的事情。问题是最后一行总是一个奇数，因此我希望最后一行保持与前几行相同的间距，从左边开始。

我尝试使用浮动、显示内联块和 flex 来执行此操作，但没有运气。这是我最近的尝试：

.wrapper{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.item{
  width: 140px;
  height: 50px;
  background-color: blue;
  margin: 10px auto;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

https://jsfiddle.net/yme1msj7/3/

编辑：

答案不一定要用 flex。我愿意接受任何关于使这项工作不涉及 javascript 的建议。

Answer 1

问题是margin: [...] auto。自动左右边距会覆盖您的对齐设置。

.wrapper{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item{
  width: 140px;
  height: 50px;
  background-color: blue;
  margin: 10px 0;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 2

您可以添加一个“最后一个”选择器并覆盖 auto 属性的 margin 值以避免默认居中仅在最后一个 div 上，保留它以供其他人避免不必要的行为：

.wrapper{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.item{
  width: 140px;
  height: 50px;
  background-color: blue;
  margin: 10px auto;
}


div:last-of-type {
 margin: 0px 10px;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

您可以使用.wrapper:not(:last-child){margin:10 auto;} 避免声明 div.last-of-type 等。有关执行相同操作的更多方法，请参阅 CSS last 伪选择器。