'column display using the flexbox

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 class="questions">
<div class="questions_div"></div>
<div class="questions_div"></div>
<div class="questions_div"></div>
<div class="questions_div"></div>
<div class="questions_div"></div>
<div class="questions_div"></div>
<div class="questions_div"></div>
<div class="questions_div"></div>
<div class="questions_div"></div>
<div class="questions_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

htmlcssflexbox


Solution 1:[1]

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 class="questions">
<div class="questions_div">A</div>
<div class="questions_div">B</div>
<div class="questions_div">C</div>
<div class="questions_div">D</div>
<div class="questions_div">E</div>
<div class="questions_div">F</div>
<div class="questions_div">G</div>
<div class="questions_div">H</div>
<div class="questions_div">I</div>
<div class="questions_div">J</div>
</div>

Solution 2:[2]

Issues i found are listed below:

  1. Close the bracket of .questions class in css.
  2. .questions_divs - spelling mistake. It's .questions_div
  3. flex: 1 0 21%; /* meaning - flex-grow flex-shrink flex-basis */
  4. change flex: 1 0 21%; to flex: 0 0 25%; /for 4 columns in a row/
  5. remove gap property. I am not sure but I think gap property is mostly used with grid css.
  6. no need to add flex and flex direction to .questions_div. Add only if you want to handle the child elements inside .questions_div.

CSS-

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

      .questions_div {
        /*display: flex;*/ /*no need to add this line*/
        /*flex-direction: column;*/ /*no need to add this line*/
        padding-left: 15px;
        flex: 0 0 25%; /* flex-grow flex-shrink flex-basis */
      }

HTML

<div class="questions">
      <div class="questions_div">some text</div>
      <div class="questions_div">some text</div>
      <div class="questions_div">some text</div>
      <div class="questions_div">some text</div>
      <div class="questions_div">some text</div>
      <div class="questions_div">some text</div>
      <div class="questions_div">some text</div>
      <div class="questions_div">some text</div>
      <div class="questions_div">some text</div>
      <div class="questions_div">some text</div>
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Crystal
Solution 2

Related Questions