CSS弹性和动态之间的空间

Question

现在我的代码显示了4列div。每个div的宽度为47%。如果您只有2列div，那么它可以完美地工作。

但是，如果您有4列div，那么如何在不关闭"flex"div然后打开另一个"flex"iv的情况下，使每行有2个div呢？

如果我有12列div，那么在每行只有2个div的情况下，我如何动态地执行呢？

.flex {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
justify-content: space-between;
}
.column {
padding: 10px;
border: 1px solid red;
width: 47%;
}

<div class="flex">
<div class="column">Hi</div>
<div class="column">Hi</div>
<div class="column">Hi</div> <!-- This should be a new row... -->
<div class="column">Hi</div>
</div>

以下是一个示例：https://jsfiddle.net/htf931bq/

Answer 1

您必须为包装器设置一个维度，然后为所有列提供47%的弹性基础，并为容器添加一个包装属性：

小提琴

.flex {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
width: 100%;
flex-wrap: wrap;
}
.column {
padding: 10px;
border: 1px solid red;
flex: 0 0 47%;  
}
<div class="flex">
<div class="column">Hi</div>
<div class="column">Hi</div>
<div class="column">Hi</div> <!-- This should be a new row... -->
<div class="column">Hi</div>

Answer 2

您可以添加：

.flex {
flex-wrap: wrap;
flex-direction: row;
}

现在有两列，每列的宽度为47%。但你必须添加一个媒体查询，才能使其对移动设备用户友好。

添加此媒体查询：

@media only screen and (max-width: 600px) {
.column {
width: 100%;
}
}

Answer 3

我得到了答案。。。

我刚刚将flex-wrap: wrap;添加到flex类中，如下所示：

.flex {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
justify-content: space-between;
flex-wrap: wrap;
}