CODEWITHSUNDEEP
htmlcssflexbox
Timmy Balk
Timmy Balk

Reputation: 238

CSS flex and space-between dynamic

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/

Upvotes: 0

Views: 1452

Answers (3)

Plastic
Plastic

Reputation: 10328

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>

Upvotes: 3

Timmy Balk
Timmy Balk

Reputation: 238

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

Upvotes: 0

Dennis
Dennis

Reputation: 538

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%;
    }
}

Upvotes: 0

Related Questions