CSS Flexbox：具有左对齐元素的中心容器

Question

我在这里设置了一个简短的演示：codepen.io。我有一个带有多个盒子的弹箱。我已经将容器的最小宽度设置为3个盒子，最大值设置为4.它可以工作，但是我希望最后一个元素是左对齐的，而不是在中间浮动。我可以用任何方式左对齐元素并简单地集中容器吗？

容器的CSS代码在这里，其中一个框的宽度/高度为100px：

.container {
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
  min-width: calc(300px + 6em);
  max-width: calc(400px + 8em);
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: red;
}

谢谢！

编辑：我正在寻找的解决方案并不像让最后一个项目与网格对齐那么简单;更具体地说，我希望屏幕宽度是动态的，因此容器元素始终水平居中并与其容器齐平。

Answer 1

在您的上一个项目上使用margin-right: auto;（使用:last-child）添加一个边距，将您的框推到左侧：

＆＃13;

＆＃13;

.container {
  padding: 1em;
  display: flex;
  overflow: auto;
  flex-wrap: wrap;
  min-width: calc(300px + 6em);
  max-width: calc(400px + 8em);
  align-items: center;
  justify-content: center;
  background: red;
}
.box {
  width: 100px;
  height: 100px;
  background: #000;
  margin: 1em;
  display: block;
}

.box:last-child { margin-right: auto; }

＆＃13;

<h1> try resizing window</h1>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我将对齐内容更改为＆＃34; flex-start＆＃34;使用Chrome＆＃34; Inspect＆＃34;功能

这似乎产生了你想要的结果。