margins and flex-wrap in a flexbox

I have a problem with flex-wrap property of a flexbox.

flex-wrap

Here is my code:

.container {
display: flex;
flex-wrap: wrap;
}

.item {
width: 50%;
margin: 0 10px;
}

<div class="container">
<div class="item"></div>
<div class="item"></div>
</div>

What I want to do is to let some space margin between items but without wrapping them. I want them horizontally two by two and every item with width of 50% margin included to prevent flex-wrap.

margin

flex-wrap

3 Answers
3

.container {
display: flex;
flex-wrap: wrap;
}

.item {
flex: 1 0 34%; /* fg, fs, fb */
margin: 10px;
height: 50px;
background-color: gray;
}

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

With flex-grow: 1 defined in the flex shorthand, there's no need for flex-basis (width) to be 50%, which results in one item per row due to the margins.

flex-grow: 1

flex

flex-basis

width

Since flex-grow will consume free space on the row, flex-basis only needs to be large enough to enforce a wrap.

flex-grow

flex-basis

In this case, with flex-basis: 34%, there's plenty of space for the margins, but not enough space for a third item on each line.

flex-basis: 34%

flex-grow:1

flex-basis

calc(100%/3 - 20px)

calc(50% - 20px)

You can use calc for this, so for example you can set flex-basis: calc(50% - margin x 2).

calc

flex-basis: calc(50% - margin x 2)

.container {
display: flex;
flex-wrap: wrap;
}

.item {
flex-basis: calc(50% - 20px);
margin: 10px;
background: lightblue;
height: 50px;
}

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

You may use calc to exclude margin from the width:

calc

.container {
display: flex;
flex-wrap: wrap;
}

.item {
width: calc(50% - 20px);
margin: 5px 10px;
height:20px;
background:red;
}

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.