Flexbox - 每行2,3或1个项目

Question

我有一个基本的flexbox实现，可以处理3列，如果使用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一起使用：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

.grid3-item {
    flex: 1 0 26%;
    text-align: center;
    background: lightgrey;
}

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

flex: 1 0 26%简写规则分解为：

• flex-grow: 1
• flex-shrink: 0
• flex-basis: 26%

使用flex-grow: 1，flex-basis不需要33.333％。

由于flex-grow将消耗行上的可用空间，flex-basis只需要足够大以强制执行换行。

在这种情况下，使用flex-basis: 26%和flex-shrink: 0，线上最多可以存在三个项目。 （另外，如果你想要它们，还有足够的空间留有余量。）

Answer 3

是的，这正是flexbox的用途。你只需要一个＆＃34; min-width＆＃34;。

这适用于我尝试的任意数量的盒子。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;