Question

现在我的代码显示了4列div。每个div的宽度为47％。如果您只有2列div，则效果很好。

但是，如果您有4列div，那么如何在不关闭“ flex” div然后再打开另一个“ flex” div的情况下使每行有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％的弹性基础，并向容器添加wrap属性：

fiddle

$file

Answer 2

您可以添加：

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

因此，现在您将有2列，每列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;
}

CSS flex和动态间距

3 个答案: