Using Margin on Flexible Items

Question

I got the impression that you can add a field for flex elements / children, and flexbox should automatically take this into account and calculate the correct distance between the elements.

I cannot make it work as I would like.

The fiddle is here: https://jsfiddle.net/dba5ehcw/1/

.flex-item{
    border: 1px solid blue;
    box-sizing: border-box;
    height: 160px;
    width: 50%;
}

Thus, each flex element is currently half the width of the container, and they fit well together.

I would like to be able to add a margin of, say, 1em to the flex elements to give them some breathing space, but at the same time they become more than 50% and no longer fit next to each other on the same line because they are too wide.

Is there a way to use a field on flex elements so that the flexbox container takes this into account and adjusts (decreases) their width accordingly?

Answer 1

You need to do this with a fill - which, when in mode, border-boxdoes not make the container larger than the specified width - not a margin, and a nested div flex. This is how all flexbox-based systems work. Code below:

.flex-container{
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;
}

.flex-item{
    padding:1em;
    box-sizing: border-box;
    height: 160px;
    width: 50%;
    display:flex;
}

.flex-item>div {
    border: 1px solid blue;
    flex: 1 1 auto;
}

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

Run codeHide result

Answer 2

There are several ways to do this:

• Use calc:

  .flex-item {
    width: calc(50% - 2em);
    margin: 1em;
  }
  

  .flex-container {
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;
  }
  .flex-item {
    border: 1px solid blue;
    box-sizing: border-box;
    height: calc(160px - 2em);
    width: calc(50% - 2em);
    margin: 1em;
  }

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

  Run codeHide result

• Use nested fields:

  .flex-item {
    width: 50%;
    display: flex;
  }
  .flex-item > div {
    border: 1px solid blue;
    flex: 1;
    margin: 1em;
  }
  

  .flex-container {
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;
  }
  .flex-item {
    height: 160px;
    width: 50%;
    display: flex;
  }
  .flex-item > div {
    border: 1px solid blue;
    flex: 1;
    margin: 1em;
  }

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

  Run codeHide result

• Put each line in the nowrap container and use a positive compression ratio for compression

  .row {
    display: flex;
  }
  .flex-item {
    width: 50%;
    margin: 1em;
  }
  

  .flex-container {
    border: 1px solid red;
    width: 320px;
  }
  .row {
    height: 160px;
    display: flex;
  }
  .flex-item {
    border: 1px solid blue;
    width: 50%;
    margin: 1em;
  }

  <div class="flex-container">
    <div class="row">
      <div class="flex-item"></div>
      <div class="flex-item"></div>
    </div>
    <div class="row">
      <div class="flex-item"></div>
      <div class="flex-item"></div>
    </div>
    <div class="row">
      <div class="flex-item"></div>
      <div class="flex-item"></div>
    </div>
  </div>

  Run codeHide result

• width. flex: 1, , .

  .flex-item {
    flex: 1;
  }
  .line-break {
    width: 100%
  }
  

  .flex-container {
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;
  }
  .flex-item {
    border: 1px solid blue;
    box-sizing: border-box;
    height: calc(160px - 2em);
    flex: 1;
    margin: 1em;
  }
  .line-break {
    width: 100%;
  }

  <div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="line-break"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="line-break"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>

  Hide result

Answer 3

Try it: -

.flex-container {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 320px;
}

.flex-item {
  justify-content: space-around;
  margin: 1%;
  background: red;
  border: 1px solid blue;
  box-sizing: border-box;
  height: 160px;
  width: 48%;
}

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

Run codeHide result