Question

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

2018-08-31_16:38:38.75242 2018-08-31 19:38:38.752  INFO 50712 --- [pool-1-thread-1] i.micrometer.influx.InfluxMeterRegistry  : successfully sent 315 metrics to influx
2018-08-31_16:39:38.76281 2018-08-31 19:39:38.760  INFO 50712 --- [pool-1-thread-1] i.micrometer.influx.InfluxMeterRegistry  : successfully sent 315 metrics to influx

请注意，子元素在其容器的中心水平对齐，但是它们是对齐的根据自己的情况向左移动（使用flexbox justify-content flex-start）（例如，请参见child3左对齐）；当我调整窗口大小时，子元素必须根据其容器保持居中对齐，但其自身应保持对齐。

我该怎么做？有可能吗？

以下是我想要的东西的样本：

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

Answer 1

问题是您将它们与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>

Answer 2

根据我的理解，我创建了您的小提琴的副本。会根据您的需求尝试基于此提供帮助。让我知道。

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

检查以下内容：http://jsfiddle.net/z8nxf5w3/98/

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

2 个答案: