html - Flexbox - 每行可容纳 2,3 或 1 个元素

Question

我有一个处理 3 列的基本 flexbox 实现，如果使用 2 列或 1 列，它会自动填充空间来处理它。

.grid3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.grid3-item {
    flex-basis: 33.333%;
    text-align: center;
    flex:1;
    background:grey;
}

<div class="grid3">
    <div class="grid3-item">
        Some Content
    </div>
    <div class="grid3-item">
        Some Content
    </div>
    <div class="grid3-item">
        Some Content
    </div>
</div>

我试图做到这一点，如果有超过 3 列，那么它们将在新行中处理，例如 5 列看起来像这样

是否可以使用 flexbox 实现此目的？这些元素是动态生成的，因此我希望能够处理任意数量的潜在元素。

Answer 1

你可以使用 flex-basis 和 flex-grow: 1 来做到这一点:

.grid3 {
    display: flex;
    flex-wrap: wrap;
}

.grid3-item {
    flex: 1 0 33%;
    text-align: center;
    border: 1px solid red;
    box-sizing: border-box
}

<div class="grid3">
    <div class="grid3-item">Some Content</div>
    <div class="grid3-item">Some Content</div>
    <div class="grid3-item">Some Content</div>
    <div class="grid3-item">Some Content</div>
    <div class="grid3-item">Some Content</div>
</div>