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

Question

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

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

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

我该怎么做？这可能吗？

这是一个接近我想要的东西的示例:

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

Answer 1

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

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

这是一个可行的选项:

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