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

你可以添加一个＆＃34; last＆＃34;选择器并覆盖margin属性的 auto 值，以避免默认仅以最后一个div为中心，保留其他div以避免不必要的行为：

＆＃13;

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

＆＃13;

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

＆＃13;

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

均匀分布除最后一行之外的行

2 个答案: