Flexbox布局中的填充底部/顶部
我有一个Flexbox布局，其中包含两个项目。其中之一使用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-bottom: 56.25%; /* intrinsic aspect ratio */
height: 0;
}<div id='flexBox'>
<div id='padding'></div>
<div id='text'>Some text</div>
</div>调整页面大小时，蓝色元素会根据其宽度保持其宽高比。这适用于Chrome和IE，如下所示：
但是，在Firefox和Edge中，我得到以下信息（它忽略了保持长宽比的蓝色框上的填充）：
我对于Flexbox来说还太陌生，以至于无法真正了解它是否应该工作。flexbox的全部目的是调整大小，但是我不确定为什么它会忽略固有的填充，而将绝对大小放在蓝色元素上。
我想最终我甚至不确定Firefox或Chrome是否在做正确的事情！任何Firefox flexbox专家都可以提供帮助吗？
2020年9月更新
FireFox和edge已从规格中实现了行为，并且flex元素的margin + padding均根据包含块的宽度进行计算。
就像块元素一样。
2018年2月更新
Firefox和Edge已同意更改其在flex（和网格）项目的顶部，底部页边距和填充的行为：
例如，在水平书写模式下，左/右/上/下百分比全都根据其包含块的宽度来解析。[来源]
尚未实现（已在FF 58.0.2上测试）。
2016年4月更新
规格已更新为：
可以根据以下任一条件解决弹性项目上的边距和填充百分比：
- 自己的轴（左/右百分比针对宽度，顶部/底部百分比针对高度），或者，
- 内联轴（左/右/上/下百分比均针对宽度进行解析）
来源：CSS Flexible Box Layout Module Level 1
这意味着chrome IE FF和Edge（即使它们的行为不同）也遵循规范推荐。
规格还说：
作者应避免在弹性项目的填充或边距中完全使用百分比，因为它们在不同的浏览器中会出现不同的行为。[来源]
解决：
您可以将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）中对此进行了测试，它们都具有相同的行为。由于第二个子级的配置是“与往常相同”，因此我认为较旧的浏览器（该支持aslo支持flexbox布局模块）将呈现相同的布局。
先前的答案：
根据规范，Firefox具有正确的行为
说明：
与根据容器宽度计算其百分比边距/填充的块项目不同，在弹性项目上：
弹性项目的边距和填充百分比始终根据其各自的尺寸进行解析；与块不同，它们并不总是针对其包含块的内联维进行解析。
这意味着padding-bottom / top / top和margin-bottom-bottom / top是根据容器的高度计算的，而不是根据非flexbox布局中的宽度计算的。
由于您尚未在父级伸缩项上指定任何高度，因此该子级的底部填充应为0px。
这是在父级上固定高度的小提琴，它表示填充底部是根据display:flex;容器的高度计算的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
配置UICollectionViewFlowLayout以从底部到顶部对行进行布局
- 2
在IB中GLKViewController中的Xcode 5中，“顶部/底部布局”指南适用于哪些内容？
- 3
在Matlab中填充顶部和底部的圆柱
- 4
去除顶部和底部的单元格填充
- 5
自动布局在设置preferredMaxLayoutWidth时在UILabel iPhone 6/6 +的顶部和底部添加额外的填充
- 6
如何在顶部和底部设置边框线性布局
- 7
我们如何在fullPage.js中为差异部分设置不同的填充顶部和底部值？
- 8
Android将底部工具栏移到布局顶部
- 9
顶部和侧栏的页面填充Flexbox布局效果不佳
- 10
旋转器的顶部/底部填充
- 11
Flexbox中的文本顶部对齐
- 12
如何在菜单下拉react-select中删除顶部和底部的填充？
- 13
如何在Mac OS中从SwiftUI列表中删除底部/顶部项目填充
- 14
在那是容器流体的课程中，我可以对顶部和底部进行填充，但是对左右不起作用？
- 15
Flexbox不添加顶部填充，但添加底部填充
- 16
相对布局顶部和底部对齐
- 17
在Matlab中填充顶部和底部的圆柱体
- 18
在ImageView上从底部到顶部以及从顶部到底部的Android布局动画单击
- 19
顶部和底部布局未按预期工作
- 20
Xcode 5不显示TableViewControllers的顶部/底部布局指南
- 21
当它们堆叠在引导程序中时，将顶部/底部填充添加到.col-xx
- 22
如何在SearchView中删除文本/布局的内部底部空间（底部边距/填充）？
- 23
移动设备的顶部和底部填充问题
- 24
如何以复杂的布局将一页中的两个部分对齐到顶部和底部？
- 25
flexbox定位，顶部一项位于底部
- 26
顶部填充和底部填充不起作用
- 27
在Flexbox布局中将元素锚定到底部
- 28
如何在 MathJax 中删除数学的顶部/底部填充？
- 29
从屏幕顶部到底部的布局
我来说两句