我正在尝试实现标准 CSS 中的一件简单的事情。
假设我有一个包含 3 列的网格系统，box-sizing: border-box.
这意味着我将容纳 3 个盒子，并留出一定的边距，以缩小尺寸以容纳最多 3 个盒子。
但当我尝试用 FLEXBOX 做到这一点时，很痛苦！
所以如果我有 divflex: 1 1 33.33%; margin: 10px;我原以为每行有 3 个盒子......但如果我使用flex-wrap: wrap，不会缩小以容纳 3 个盒子。
这是一个例子.. 这个想法是第二行将有 3 个盒子在一行中，第四个盒子将在最后一行。
Thanks
https://jsfiddle.net/mariohmol/pbkzj984/14/
.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;
}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>请记住box-sizing: border-box将填充和边框带入宽度/高度计算中，但不是边距。保证金始终单独计算。
The box-sizing属性有两个值：
content-boxborder-box它不提供padding-box or margin-box.
提及时请考虑这些术语CSS 盒子模型.
source: W3C
3.1.更改盒子模型：box-sizing财产
content-box指定的宽度和高度分别适用于宽度和高度 元素的内容框。的内边距和边框 元素在指定的宽度和高度之外进行布局和绘制。
border-box该元素的长度以及宽度和高度的百分比值 确定元素的边框。也就是说，任何填充或 元素上指定的边框在该元素内布局和绘制 指定的宽度和高度。内容的宽度和高度是 通过减去边框和填充宽度来计算 指定宽度和高度属性的各个边。
另外，弹性容器的初始设置是flex-shrink: 1。这意味着弹性物品可以收缩以适合容器。
因此，指定一个width, height or flex-basis不会成立，除非flex-shrink被禁用。
您可以使用以下命令覆盖默认值flex-shrink: 0.
这是更完整的解释：flex-basis 和 width 有什么区别？
这是一个简单的解决方案：
你有四个盒子。您希望第 1 行有 3 个，第 2 行有最后一个。
这就是你所拥有的：
flex: 1 1 33.33%;
margin: 10px;
这可以分解为：
flex-grow: 1flex-shrink: 1flex-basis: 33.33%我们知道box-sizing: border-box因素填充和边框flex-basis。那不是问题。但利润率又如何呢？
好吧，既然你已经flex-grow: 1对于每个项目，不需要flex-basis为33.33%。
Since 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>