Css 横轴长度忽略边距

flexbox的一个非常酷的地方是，如果有空间，flex项目的边距将包含在flex容器的宽度中，即使我告诉它占用整个空间。例如，如果我有一个100px宽的flex容器，给它一个占据整个宽度的子容器，然后给该子容器两侧10px的边距，该子容器实际上变为80px宽，因为该容器允许完全封装该子容器，包括边距。这忽略了对溢出的关注，溢出可以很容易地解决（

minwidth:0；

通常处理此问题）

flex容器{
宽度：100px；
高度：100px；
显示器：flex；
背景色：淡蓝色；
}
弹性项目{
显示：块；
背景色：暗灰色；
左边距：10px；
右边距：10px；
宽度：100%；
高度：20px；
边缘顶部：20px；
}

---

当您将flexbox定义为列并删除宽度时，它将尊重边距：100%用于子项

flex容器{
宽度：100px；
高度：100px；
显示器：flex；
背景色：红色；
}
弹性项目{
显示：块；
背景颜色：绿色；
左边距：10px；
右边距：10px；
宽度：100%；
边缘顶部：20px；
边缘底部：20px；
}

---

原因是在设置flex的方向上，由于

flex grow

的默认值为0，因此不允许它增长，但允许它收缩，（

flex shrink

默认值为

1

），所以它是这样做的

下面是使用列方向的相同测试，您将获得相反的行为

您的第一个示例，但带有列方向

flex容器{
宽度：100px；
高度：100px；
显示器：flex；
弯曲方向：立柱；
背景色：红色；
}
弹性项目{
显示：块；
背景颜色：绿色；
左边距：10px；
右边距：10px；
宽度：100%；
高度：20px；
边缘顶部：20px；
}

---

flex容器的初始设置为

这意味着弹性物品将在必要时收缩，以避免容器溢出

flex-shrink

属性（以及

flex-grow

、

flex-basis

和

flex

）仅在主轴上工作。这就是为什么你会看到宽度和高度的不同

向行方向容器中的弹性项添加上下页边距时，

flex-shrink:1

功能不适用（因为您现在位于横轴上），因此该项不会收缩以适应添加的页边距

如果禁用

flex-shrink

，则具有水平边距的flex项目将溢出容器：

flex容器{
宽度：100px；
高度：100px；
显示器：flex；
背景色：红色；
}
弹性项目{
弹性收缩：0；/*新*/
左边距：10px；
右边距：10px；
宽度：100%；
高度：20px；
边缘顶部：20px；
背景颜色：绿色；
}

是的，但我希望它包括交叉方向的边距。更改为

flex flow:column

可使高度成为主轴。代码已调整。仅身高：100%删除。我澄清了我问题的意图。我想知道为什么子项上的

width:100%

不包括边距，而

height:100%

不包括边距。是的，这仍然忽略了

柔性方向

/

柔性流

的影响。对于meSorry来说，红色和绿色很难区分，我不是一个很好的设计师。绿色/橙色怎么样？更好！更新的Thx:）上列出了一些有用的颜色工具，例如，您可以在其中设定4.5+的对比度。lea verou one看起来像是用于背景和文本颜色。它也是两种背景色吗？很好的愉快设计和编码：）@trysis因为边距总是增加到给定的宽度或高度，所以你需要做

width:calc（100%-20px），分别为<代码>高度：计算（100%-20px）。。。。或者您只需删除设置的宽度/高度。。。我不能确切地说这在跨浏览器中是如何工作的，你需要检查哪一个工作，哪一个应该工作though@trysis然后，我建议您跳过边距，并使用填充在网格项目之间创建边沟。我也可以请你接受解决你原来问题的答案吗。。。如果您还有其他问题，请随时发布另一个带有扩展要求的问题，因为我相信我们可以为您提供更多帮助，一次一个问题：）@trysia问您需要的问题，只需逐个发布：）好的，这是问题的一部分。我会考虑问另一个问题，只是需要弄清楚怎么说。谢谢你的鼓励。经过进一步的思考（以及一个完整的未发布的问题），你的回答对于我所处的几乎所有flex-y情况来说都足够了。它还澄清了实际发生的事情，这也许更重要。如果我发现或记得一个具体的情况，这是不够的，我会问另一个问题。再次感谢你。