不尊重边距和盒子尺寸的可伸缩产品:边框-Flexitemsnotrespectingmarginsandbox-sizing:border-box

3  

Keep in mind that box-sizing: border-box brings padding and borders into the width / height calculation, but not margins. Margins are always calculated separately.

请记住，框级:边框在宽度/高度计算中包含了填充和边框，但不包含边框。边距总是分开计算的。

The box-sizing property takes two values:

box尺寸属性有两个值:

• content-box
• 内容框
• border-box
• border-box

It does not offer padding-box or margin-box.

它不提供球拍盒或保证金盒。

Consider those terms when referring to the CSS Box Model.

在引用CSS框模型时考虑这些术语。

^{source: W3C}

来源:W3C

3.1. Changing the Box Model: the box-sizing property

3.1。改变盒子模型:盒子尺寸属性

content-box

内容框

The specified width and height apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height.

指定的宽度和高度分别应用于元素内容框的宽度和高度。元素的填充和边框被放在指定的宽度和高度之外并绘制出来。

border-box

border-box

Length and percentages values for width and height on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified width and height properties.

这个元素的宽度和高度的长度和百分比值决定元素的边框。也就是说，元素上指定的任何填充或边框都在指定的宽度和高度内展开和绘制。内容宽度和高度是通过从指定的宽度和高度属性中减去边界和填充宽度来计算的。

Also, an initial setting of a flex container is flex-shrink: 1. This means that flex items can shrink in order to fit within the container.

另外，flex容器的初始设置是flex-shrink: 1。这意味着flex项目可以收缩以适应容器。

Therefore, a specified width, height or flex-basis will not hold, unless flex-shrink is disabled.

因此，除非禁用了浮动收缩，否则指定的宽度、高度或浮动基础将无法保持。

You can override the default with flex-shrink: 0.

您可以使用flex-shrink: 0覆盖默认值。

Here's a more complete explanation: What are the differences between flex-basis and width?

这里有一个更完整的解释:弹性基底和宽度的区别是什么?

Here's a simple solution:

这里有一个简单的解决方案:

You have four boxes. You want three on row 1 and the last on row 2.

你有四个盒子。你想要第三行是第1行，最后一行是第2行。

This is what you have:

这就是你所拥有的:

flex: 1 1 33.33%;
margin: 10px;

This breaks down to:

这种分解:

• flex-grow: 1
• flex-grow:1
• flex-shrink: 1
• flex-shrink:1
• flex-basis: 33.33%
• flex-basis:33.33%

We know that box-sizing: border-box factors padding and borders into the flex-basis. That's not a problem. But what about the margins?

我们知道盒子尺寸:边界框因素填充和边界到弹性基础。这不是一个问题。但是边际呢?

Well, since you have flex-grow: 1 on each item, there is no need for flex-basis to be 33.33%.

既然每个项目都有1个弹性增长，那么就不需要将弹性增长的基础设为33.33%。

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

由于flex-grow将消耗行上的任何空闲空间，所以flex- based只需要足够大就可以强制换行。

Since margins also consume free space, flex-grow will not intrude into the margin space.

由于边际也消耗自由空间，弹性增长不会进入边际空间。

So try this instead:

所以试试这个:

flex: 1 1 26%;
margin: 10px;

* {
  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% 


  A
  B
  C
  D



 WITH flex-wrap: wrap : I expect to have 3 boxes in first row and D box in a down


  A
  B
  C
  D

0  

As well pointed out in Michael_B's answer margins are not taken into account when calculating flex item width. But you can subtract margins from flex-basis to get desired behaviour.

正如Michael_B在计算flex项目宽度时所指出的那样，答案边距是不考虑的。但是你可以从弹性的基础上减去边际来得到想要的行为。

For current case:

对于目前的情况:

header > span {
  /* 33.33% - margin-left - margin-right */
  flex: 1 1 calc(33.33% - 20px);
  margin: 10px;
}

Also you should set box-sizing: border-box to include padding (and borders) when calculating width.

此外，还应该设置方框大小:边界框，在计算宽度时包含填充(和边框)。

* {
  box-sizing: border-box;
}

.horizontal-layout {
  display: flex;
  width: 400px;
}

header > span { 
  flex: 1 0 calc(33.33% - 20px);
  margin: 10px;
}

header#with-border-padding {
  flex-wrap: wrap;
}

header#with-border-padding > span {
  flex: 1 0 calc(33% - 20px);
}

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% 


  A
  B
  C
  D



 WITH flex-wrap: wrap : I expect to have 3 boxes in first row and D box in a down


  A
  B
  C
  D