Flexbox-每排可容纳2,3或1个项目 [英] Flexbox - Cater for 2,3 or 1 items per row

问题描述

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

I have a basic flexbox implementation that handle 3 columns, if 2 or 1 columns are used then it automatically fills the space to handle it..

.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列看起来像这样

I am trying to make it so that if there are more than 3 columns then they will be handled on a new row, so for example 5 columns would looks like this

是否可以使用flexbox做到这一点?这些项目是动态生成的，因此我希望能够处理任意数量的潜在项目.

Is it possible to achieve this using flexbox? The items are generated dynamically so I want to be able to handle any number of potential items.

推荐答案

您可以将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>

这篇关于Flexbox-每排可容纳2,3或1个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！