How do I correctly set flex item to 50% percent when gap is used?

Question

So it seems I misunderstand something about flexbox and can't correctly solve the issue.

I have a flexbox container that contains four columns which are flexbox container's direct children. And once browser window width reaches 992px and lower I want to change so that .flexbox-item takes 50% width of the container.

The problem: It seems to work fine if I don't use 'gap' property on .flexbox-container but once I put gap: 1em, then percentages are not working correctly, as I understand gap is taken into account and adds up width to those .flex-item items.

The question: How do I correctly ensure that once browser window is 992px or lower that each flexbox item takes 50% percent so I can have two columns in each row, because apparently I can play with 'width' property and give it let's say 45% and it will work, but for me it doesn't look like a correct solution. I would like to know what is the easiest way to still use those percentages correctly when 'gap' propery is used.

Any help is really appreciated.

This is the code I have:

<div class="flexbox-container">
  <div class="flexbox-item">Item 1</div>
  <div class="flexbox-item">Item 2</div>
  <div class="flexbox-item">Item 3</div>
  <div class="flexbox-item">Item 4</div>
</div>

And CSS:

.flexbox-container {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   gap: 1em;
 }

.flexbox-item {
  width: 25%;
  background-color: lightgreen;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 992px) {
  .flexbox-item {
    width: 50%;
  }
}

You can also see the result here: https://jsfiddle.net/Erasus/gxtvhuow/12/

The short answer is to use **calc(50% - 1em)** as **flex-basis**. E.g. `flex: 1 1 calc(50% - 1em);`. It can be seen in the @crystal's answer — Sergey Beloglazov, Mar 29 '23 at 13:00

Crystal · Accepted Answer · 2022-05-25T02:53:41.680

3

You can try to use grid or flex either work but I would do this way. If this is what you mean Let me know.

.flexbox-container {
 display: grid;
 grid-template-columns: auto auto auto auto;
 grid-gap: 1em;
 }

.flexbox-item {
  width: 100%;
  background-color: lightgreen;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexbox-container2 {
 display: flex;
 grid-gap: 1em;
 }


.flexbox-item2 {
  width: 100%;
  background-color: lightgreen;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 992px) {
.flexbox-container {
    display: grid;
    grid-template-columns: auto auto;
    
  }
  
.flexbox-container2 {
 display: flex;
 flex-wrap: wrap;
 grid-gap: 1em;
 }
 
 .flexbox-item2:nth-child(2n + 1),
 .flexbox-item2:nth-child(2n + 2) {
 flex: 0 0 calc(50% - 10px);
 
}
}

<h1>This is the grid way</h1>
<div class="flexbox-container">
  <div class="flexbox-item">Item 1</div>
  <div class="flexbox-item">Item 2</div>
  <div class="flexbox-item">Item 3</div>
  <div class="flexbox-item">Item 4</div>
</div>

<br>

<h1>This is the flex way</h1>
<div class="flexbox-container2">
  <div class="flexbox-item2">Item 1</div>
  <div class="flexbox-item2">Item 2</div>
  <div class="flexbox-item2">Item 3</div>
  <div class="flexbox-item2">Item 4</div>
</div>

edited May 25 '22 at 02:53

answered May 25 '22 at 02:09

Crystal

1,845
2
4
16

Thank you for your answer, that's exactly what I want. Could you explain me shortly, why making container a grid container and using auto values work correctly, is it not possible to achieve this with flexbox? – Erasus May 25 '22 at 02:14
grid is to align elements into columns and rows, an auto value for the column element of grid is the size of the columns is determined by the size of the container and on the size of the content of the items in the column. I would suggest you read more about it https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout to understand better. Happy coding. – Crystal May 25 '22 at 02:24
@Erasus I edit the answer so you can do things either way i have an example for you so you can use the flex and the grid way. – Crystal May 25 '22 at 02:55
Thank you so much for your effort, I will study your examples even more, now I have better idea, just need to brush up my grid and flexbox skills :D – Erasus May 25 '22 at 03:03
No worries. glad to help – Crystal May 25 '22 at 03:04

How do I correctly set flex item to 50% percent when gap is used?

1 Answers1