CSS flex and space-between dynamic

Question

Right now my code shows 4 column divs. Each div is 47% in width. If you only have 2 column divs, it works perfectly.

But if you have 4 column divs, how can you make it so that there is 2 divs per row without closing the "flex" div and then opening another "flex" div?

What if I have 12 column divs, how can I do it dynamically where there is only 2 divs per row?

 .flex { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; justify-content: space-between; } .column { padding: 10px; border: 1px solid red; width: 47%; } 

 <div class="flex"> <div class="column">Hi</div> <div class="column">Hi</div> <div class="column">Hi</div> <!-- This should be a new row... --> <div class="column">Hi</div> </div> 

Here is an example: https://jsfiddle.net/htf931bq/

Answer 1

You have to set a dimension for the wrapper, than give all columns a flex basis of 47% and add a wrap attribute to the container:

fiddle

.flex {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    width: 100%;
    flex-wrap: wrap;
}

.column {
    padding: 10px;
    border: 1px solid red;
    flex: 0 0 47%;  
}

<div class="flex">
<div class="column">Hi</div>
<div class="column">Hi</div>

<div class="column">Hi</div> <!-- This should be a new row... -->
<div class="column">Hi</div>

Answer 2

You can add:

.flex {
    flex-wrap: wrap;
    flex-direction: row;
}

So now you'll have 2 columns, each 47% width. But you'll have to add a media query in order to make it user friendly for mobile devices.

Add this media query:

@media only screen and (max-width: 600px) {
    .column {
         width: 100%;
    }
}

Answer 3

I got the answer...

I just added flex-wrap: wrap; to the flex class like this:

.flex {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: space-between;
    flex-wrap: wrap;
}