在调整窗口大小时，保持子元素根据其容器水平对齐，并根据其他子元素保持左对齐

Question

我希望元素在窗口调整大小时以容器为中心对齐，如下所示：

-----------child1--child2----------
-----------child3-----------------

看到子元素水平对齐到它们的容器中心，但它们是对齐的 根据自己离开（使用 flexbox justify-content flex-start），（参见 child3 例如左对齐）； 当我调整窗口大小时，子元素必须根据其容器保持居中对齐，但自身左对齐。

我怎么能这样做？这可能吗？

这是一个接近我想要的东西的样本：

http://jsfiddle.net/z8nxf5w3/193/

Answer 1

根据我的理解，我创建了您的小提琴副本。将基于此根据您的需要尝试提供帮助。告诉我。

我认为您的容器的 text: center 属性导致了问题。

检查这个：http://jsfiddle.net/z8nxf5w3/98/

Answer 2

问题是您在 div 中将它们与margin: auto 居中，并且仍在尝试使它们在 .wrapper 中左对齐。

除了删除margin: auto，我还删除了最小宽度。如果您想在包装器中居中但左对齐，您应该通过媒体查询来处理这个问题。 为什么？您在包装器中居中的方式是让它们完全填满（您定义的填充除外）。我创建了样本选项：每行 3 个和 2 个元素。如果您以百分比计算边距和宽度，则可以使它们填满整个包装。

这是一个可行的选择：

.container{
  padding:30px;
  background-color:green;
  text-align:center;
}
.wrapper{
   padding:30px;
  background-color:yellow;
   display:flex;
   justify-content:flex-start;
   flex-wrap:wrap;
   margin:auto;
   width:40%;
}

.wrapper div{
  
  /*min-width: 100px; --> don't use this, use % and media queries */
  width: 31.3%;
  margin: 5px 1%; /* 31.3 * 3 + 6 * 1 = 99.9% */
  background-color: #eee;
  /* margin-right:auto; --> this centers the elements
  margin-left:auto; */
}
@media (max-width: 600px) {
  .wrapper div{
    width: 48%; /* 2*48 + 4 = 100% */
  }
}

<div class="container">
  <div class="wrapper">
      <div class="child-1">
      text1
      </div>
      <div class="child-2">
      text2
      </div>
      <div class="child-3">
      text3
      </div>
      <div class="child-4">
      text4
      </div>
      <div class="child-5">
      text5
      </div>
    </div>
</div>