更新2020年9月
FireFox and edge have implemented the behaviour from the specs and margin + padding for flex elements are both calculated occording to the width of the containing block.
Just like block elements.
Update Febuary 2018
firefox 和edge已经同意改变他们对flex(和网格)项目的上边距、下边距和填充的行为:
[...] e、 g.在水平书写模式下，左/右/上/下百分比均根据其包含块的宽度进行解析.[source]
这尚未实现(在FF 58.0.2上测试).
Update april 2016个
(100)
规格有been updated到:
弹性项上的百分比边际和填充可以根据以下任一项进行解析:
- 它们自己的轴(左/右百分比与宽度的分辨率，上/下分辨率与高度的分辨率)，或者，
- 内联轴(左/右/上/下百分比全部解析宽度)
source: 100
这意味着Chrome IE、FF和Edge(即使它们有不同的行为)遵循推荐的规格.
说明书上还写着:
作者应避免在FLEX上使用填充百分比或页边距
项，因为它们在不同的
浏览器.[100]
解决方法:
您可以将flex容器的第一个子级包装在另一个元素中，并将padding-bottom放在第二个子级上:
#flexBox {
border: 1px solid red;
width: 50%;
margin: 0 auto;
padding: 1em;
display: flex;
flex-direction: column;
}
#text {
border: 1px solid green;
padding: .5em;
}
#padding {
margin: 1em 0;
border: 1px solid blue;
}
#padding > div {
padding-bottom: 56.25%; /* intrinsic aspect ratio */
}
<div id='flexBox'>
<div id='padding'><div></div></div>
<div id='text'>Some text</div>
</div>
我在现代浏览器(IE、Chrome、FF和Edge)中测试了这一点，它们都有相同的行为.由于第二个子元素的配置"和平常一样"，我想老一点的浏览器(也就是support flexbox layout module)将呈现相同的布局.
Previous answer:个
According to the 100, Firefox has the right behaviour
解释:
与挡路项目根据容器宽度计算其毛利/填充百分比不同，在弹性项目上:
弹性项目上的百分比边距和填充始终是解析的
；与块不同，它们并不总是
解析其包含的挡路的内联维度.
source dev.w3.org
这意味着padding-bottom/top and margin-bottom/top are calculated according to the height of the container，而不是像在非弹性框布局中那样的宽度.
As you have not specified any height on the parent flex item, the bottom padding of the child is supposed to be 0px.
Here is a fiddle with a fixed height on the parent that shows that padding bottom is calculated according to the height of the display:flex; container.
个
个