Using Margin on Flex Items

Using margin on flex items

You need to do it with padding - which, when in border-box mode does not make the container larger than it's specified width - not margin, and a nested flex div. This is how all flexbox-based grid 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>

Better way to set distance between flexbox items

Flexbox doesn't have collapsing margins.
Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

How to create margins to the side of inline-flex elements?

In this situation, you want to use the flex property justify-content: space-evenly;. What this will do, is spacing all the elements evenly, including the right and left margins.
But for that, you need to create a container with the items you want inside. Look at the following example:

.flex{

 display: flex;

 justify-content: space-evenly;

}

.item {

    margin-top: 5vh;

    background-color: #ff8000;

    border: 3px solid transparent;

    height: 30vh;

    width:20vw;

}

<div class="flex">

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

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

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

</div>

How to add 1px margin to a flex item that is flex: 0 0 25%?

You can use flex: 1 0 22% for example. This will allow your element to be defined by 22% as flex-basis (so only 4 elements per row) and they will grow to fill the remaining space left by margin (since flex-grow is set to 1)

#foto-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  margin: 10px;

}

.foto {

  flex: 1 0 22%;

  min-height: 50px;

  margin: 1px;

  background-color: red;

}

<div id="foto-container">

  <div class="foto foto1">1</div>

  <div class="foto foto2">2</div>

  <div class="foto foto3">3</div>

  <div class="foto foto4">4</div>

  <div class="foto foto5">5</div>

  <div class="foto foto6">6</div>

  <div class="foto foto7">7</div>

  <div class="foto foto8">8</div>

  <div class="foto foto9">9</div>

  <div class="foto foto1">1</div>

  <div class="foto foto2">2</div>

  <div class="foto foto3">3</div>

</div>

How to set margin of item in flexbox?

The way I do it is using nested div and apply the margin within those divs, this ways you can have more controls over margin. Since you are using flexbox, you can use flex-basis and flex-grow to distribute your divs instead of using width and height.

You can try this:

*{

  margin:0;

  padding:0;

}

#wrap {

  width: 800px;

  background:#ece8e8;

  overflow:hidden;

}

#left {

  width: 550px;

  height: inherit;

  float: left;

  background:#b8b8b8;

}

#flexbox {

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

  /*margin-left: 2%;*/

  width: 100%;

  overflow: hidden;

  height: 500px;

}

.item {

  /*width: 47%;*/

  /*height: 200px;*/

  /*margin-right: 2%;*/

  background: grey;

  flex-basis: 50%;

  flex-grow: 1;

}

.item>div {

    background: #454444;

    margin: 2%;

    height: 100%;

}

.item:nth-child(1)>div,

.item:nth-child(2)>div{

  margin-right: 0%;

}

<div id="wrap">

  <div id="left">

    <div id="flexbox">

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

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

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

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

    </div>

  </div>

</div>

How to evenly distributed margin with flex?

Here is an example for this. You can try this code. It is fully tested. I hope it will help you.

CSS:

.contianer {
  display: grid;
  background-color:red;
  grid-column-gap: 10px;
  grid-template-columns: auto auto auto auto;
  grid-row-gap: 10px;
  padding: 10px;
}
.child {
  background-color: yellow;
  height: 100px;
}

By using grid, you can achieve this. I tested this code in your demo "https://stackblitz.com/edit/react-fapbff". It is working fine.

Applying margin to flex items

There's a problem with the selector you're using to apply the bottom margin:

.left,
.right,
.middle * {
    margin-bottom: 25%;
}

This selector says:

Apply the margin to .left
Apply the margin to .right
Apply the margin to all descendants of .middle

That's why your text boxes are getting the margin – they're descendants of .middle – and your images are not – they're descendants of .left, but .left in your CSS isn't targeting descendants.

Make this adjustment:

.left *,
.right,
.middle * {
    margin-bottom: 25%;
}

ALSO, KEEP IN MIND that the flexbox specification discourages use of percentages on margin and padding when dealing with flex items (read more).

Using Margin on Flex Items