Flex Items Not Respecting Margins and Box-Sizing: Border-Box

* {  box-sizing: border-box;}
.horizontal-layout {  display: flex;  width: 400px;}
header > span {   flex: 1 0 26%;                    /* ADJUSTED */  margin: 10px;}
header#with-border-padding {  flex-wrap: wrap;}
header#with-border-padding>span {  flex: 1 0 26%;                   /* ADJUSTED */}
header#with-border-padding>.button {  border: 1px solid black;  padding-left: 5px;}
header>.button {  background-color: grey;}
header>.app-name {  background-color: orange;}

NO flex-wrap: wrap, so it not respects the flex 33% <br/><header class="horizontal-layout">  <span class="button">A</span>  <span class="app-name">B</span>  <span class="button">C</span>  <span class="button">D</span></header><br/><br/> WITH flex-wrap: wrap : I expect to have 3 boxes in first row and D box in a down<br/><header id="with-border-padding" class="horizontal-layout">  <span class="button">A</span>  <span class="app-name">B</span>  <span class="button">C</span>  <span class="button">D</span></header>

Flex Item only respecting margin or padding when both are set

You also have to write box-sizing for the elem class as well. Due to the dimension of the elements that include padding and maybe borders in future. Because box-sizing property allows us to include the padding and border in an element's total width and height. I hope it helped :)

Flex-grow doesn't respect border-box. Bug or not? And any way to overcome?

This is not a bug. It is the desired behavior.

When you have a bunch of flex-children, and apply flex-basis: 0 and flex-grow: 1 to them, the following steps are being taken by the browser:

• Render text and other content the flex-children have
• Apply padding, borders and margins (taking the box-sizing into account)
• Starting with the smallest flex-child (because of flex-basis: 0) keep adding width to the items until the container is full (flex-grow: 1).

That last step is where your problem lies. The browser doesn't force the elements to first be 0 pixels wide and all grow evenly. The browser simply starts with the smallest flex-child, giving it more width until it has grown as wide as the second smallest. At that point both of these flex-children will both grow evenly. And so forth, adding width until all space is distributed. This is also why box-sizing: border-box seems to not working.

You can fix this by adding a container to each of the flex-items, which has the border-box part applied. See this Fiddle. The contents have been wrapped into another div, and the styles have been applied to it as well (except for the flex-specific properties, of course).

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>

div {  display: flex;}
button {  flex: 1 1 auto;  margin: 5px;}

<div>  <button>Cancel</button>  <button>Continue</button></div>