html - 包裹时向左浮动 div 中心

Question

我现在可以使用下面的代码让 div 居中，向左浮动。

<fieldset>
<div class="form_wrapping_columns_container">
  Test1
</div>
<div class="form_wrapping_columns_container">
  Test2
</div>
<div class="form_wrapping_columns_container">
  Test3
</div>
<div class="form_wrapping_columns_container">
  Test4
</div>
<div class="form_wrapping_columns_container">
  Test5
</div>
</fieldset>

fieldset
{
text-align:center;
display:inline-block;
margin: 0 auto;
}
.form_wrapping_columns_container{
width:200px;
float: left;
text-align:left;
margin-left: 60px;
margin-right: 60px;
padding-left:0px;
}

但我想做的是，如果浏览器窗口缩小，我仍然希望 div 居中，即使它们必须换行。但似乎字段集宽度将始终扩展以保持所有它们并排 float ，即使它们必须堆叠也是如此，因此随着窗口缩小，居中不起作用。

再澄清一点。容器 div 需要保持设定的宽度。并允许根据浏览器宽度并排显示尽可能多的内容。如果因为窗口太小而需要将它们堆叠在一起，那也没关系。但如果他们需要堆叠，我仍然希望他们居中。如果它们可以并排放置，它会居中，但一旦堆叠就不会居中。

我确定我缺少的是一些简单的东西，我们将不胜感激。我在这里进行了一些搜索，但从未找到似乎可以解决我的问题的答案。

谢谢

Answer 1

这是您要找的吗？ JSFiddle

请注意，这在旧浏览器上的支持不是很好，但如果您不关心旧浏览器，Flex 工作得很好。

如果您需要稍作改动，请告诉我。请注意，我将 fieldset 更改为 div，因为显然 flex 不想使用 fieldset。可以吗？

HTML:

<div id="fieldset">
    <div class="form_wrapping_columns_container">
      Test1
    </div>
    <div class="form_wrapping_columns_container">
      Test2
    </div>
    <div class="form_wrapping_columns_container">
      Test3
    </div>
    <div class="form_wrapping_columns_container">
      Test4
    </div>
    <div class="form_wrapping_columns_container">
      Test5
    </div>
</div>

CSS:

#fieldset
{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.form_wrapping_columns_container
{
    margin: 0 auto;
    height: 60px;
    width: 50px;
    -webkit-flex: 0 0 50px;
    flex: 0 0 50px;
    border: 1px solid black;
}