时间戳

首页 > 解决方案 > CSS flex 和 space-between 动态

html - CSS flex 和 space-between 动态

问题描述

现在我的代码显示 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/

标签： htmlcssflexbox

解决方案

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

小提琴

.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>

推荐阅读