如何在没有显示的情况下制作包装 div：inline-block;？

Question

所以我想让外层div外面的内层divs根据外层div的宽度进行包裹，进而根据外层div的宽度进行伸缩浏览器 window。我知道我可以使用 display: inline-block; 使 div 相互环绕，但是当它们这样做时，div 不会水平居中。 text-align: center; 和分配 display: flex; + justify-content: center; 不起作用。

Answer 1

html:

<div class="LabelColumn">label column</div>
<div class="DataColumn">data column</div>

css:

div.LabelColumn
{
    padding: 10px;
    width: 150px;
    float: left;
    margin:10px;
    border:1px solid #333;
}

div.DataColumn
{
    padding: 10px;
    width: 150px;
    float: left;
    margin:10px;
    border:1px solid #333;
}

here你可以看一个例子，我想对你有帮助。

Answer 2

也许你只需要添加 flex-wrap: wrap;到容器，所以内部 div 开始换行。

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

这里是working demo.

如何在没有显示的情况下制作包装 div：inline-block;？

How to make wrap divs without display: inline-block;?

html

css

flexbox