column display using the flexbox-CodePudding

I am using the code where i have a bunch of divs, i want to show 4 columns per row and this is what i am using

.questions {
    margin-bottom: 15px;
    background: #e1e1e1;
    display: flex;
    padding: 30px;
    gap: 30px;
    align-items: top;
    justify-content: left;
    width: 100%;
    flex-wrap: wrap;


.questions_divs {
     display: flex;
        flex-direction: column;
        padding-left: 15px;
        flex: 1 0 21%; /* explanation below */
}

here is the html

<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>

now when the lements are 3 or 3 or 6 or 9, i want them to come to next line, but they are coming in center and too much gap, how can i make sure they are left aligned with not too much gap

CodePudding user response：

Do you mean that ?

.questions {
    margin-bottom: 0;
    background: #e1e1e1;
    display: flex;
    padding: 30px;
    gap: 30px;
    justify-content: space-around;
    flex-wrap: wrap;

<div >
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
<div >6</div>
<div >7</div>
<div >8</div>
<div >9</div>
<div >10</div>
</div>

CodePudding user response：

You mean something like this??

.questions {
    margin-bottom: 15px;
    background: #e1e1e1;
    display: flex;
    padding: 30px;
    grid-gap: 30px;
    align-items: top;
    justify-content: left;
    width: 100%;
    flex-wrap: wrap;

}

.questions_div {
        padding-left: 15px;
        height:100px;
        width:100px;
        background-color:red;
        flex: 1 0 1 21%;
        
}

<div >
<div >A</div>
<div >B</div>
<div >C</div>
<div >D</div>
<div >E</div>
<div >F</div>
<div >G</div>
<div >H</div>
<div >I</div>
<div >J</div>
</div>