Flex项目不考虑边距和框大小：边框

Question

我试图在标准CSS中实现一个简单的事情。

我们说我有一个包含3列和box-sizing: border-box的网格系统。

这意味着我将适合3个盒子并且边距会缩小尺寸以适应最多3个盒子。

但是当我尝试用FLEXBOX做到这一点时，它很痛苦!!

所以，如果我有flex: 1 1 33.33%; margin: 10px;的div，我希望每行有3个盒子......但是如果我使用flex-wrap: wrap，那么它将不会缩小到3个盒子。< / p>

这是一个例子..这个想法是第二行连续有3个盒子，第四个盒子在最后一行。

由于

https://jsfiddle.net/mariohmol/pbkzj984/14/

＆＃13;

＆＃13;

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

header>span {
  /* flex: 1 1 100%; */
  /* flex: 1 0 100%; */
  flex: 1 1 33.33%;
  margin: 10px;
}

header>.button {
  background-color: grey;
}

header>.app-name {
  background-color: orange;
}

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

header#with-border-padding>span {
  flex: 1 1 33.33%;
  box-sizing: border-box;
  /* this is not useful at all */
}

header#with-border-padding>.button {
  border: 1px solid black;
  padding-left: 5px;
}

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请注意box-sizing: border-box为宽度/高度计算带来填充和边框，但不是边距。边距总是单独计算。

box-sizing属性有两个值：

• content-box
• border-box

它不提供padding-box或margin-box。

在引用CSS Box Model时考虑这些术语。

^来源：W3C

  

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

     

<强> content-box

     

指定的宽度和高度分别适用于宽度和高度   元素的内容框。填充和边界的   元素在指定的宽度和高度之外布局和绘制。

     

<强> border-box

     

此元素的宽度和高度的长度和百分比值   确定元素的边框。也就是说，任何填充或   在元素上指定的边框布局并在此内部绘制   指定的宽度和高度。内容的宽度和高度是   通过减去边框和填充宽度来计算   指定宽度和高度属性的各边。

此外，Flex容器的初始设置为flex-shrink: 1。这意味着flex项目可以缩小以适合容器。

因此，除非width被禁用，否则指定的height，flex-basis或flex-shrink将无效。

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

以下是更完整的解释：What are the differences between flex-basis and width?

以下是一个简单的解决方案：

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

这就是你所拥有的：

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

这分解为：

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

我们知道box-sizing: border-box因素填充和flex-basis的边界。那不是问题。但是利润率呢？

好吧，由于每个项目都有flex-grow: 1，因此flex-basis不需要33.33％。

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

由于边距也消耗了可用空间，flex-grow不会侵入边距空间。

所以试试这个：

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

Answer 2

在Michael_B's answer边距中指出，在计算弹性项目宽度时不考虑边距。但是，您可以从cv-qualified中减去margin以获得所需的行为。

目前的情况：

flex-basis

此外，您应该在计算header > span { /* 33.33% - margin-left - margin-right */ flex: 1 1 calc(33.33% - 20px); margin: 10px; } 时将box-sizing: border-box设置为包含填充（和边框）。

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;
}