我正在尝试向元素内的display:flex元素添加填充。如果将填充定义为百分比,则在Firefox中不会显示填充,尽管在中定义时会显示px。两种情况在Chrome中都可以正常工作。
div { background: #233540; } div > div { color: #80A1B6; } .parent { display: flex; } .padded { padding-bottom: 10%; } <div class="parent"> <div class="padded"> asdf </div> </div>
网格/弹性百分比
该小组试图研究如何定义垂直百分比边距和填充。注意:传统上,CSS的顶部和底部页边距是针对包含块的宽度而不是其高度进行解析的,这具有一些有用的效果,但通常令人惊讶。现有的布局模式当然必须继续这样做。先前的小组解决方案是针对选项2(如下)的,但Google认为他们掌握了有关吸收行为的新信息,值得重新考虑。
讨论归结为三个潜在的解决方案: 选项1:始终按宽度解析百分比。 选项2:网格和弹性根据高度分解,而绝对项目始终按照宽度分解。 选项3:网格和弯曲(包括其吸收项目)
根据高度确定。其他地方的弃权问题继续根深蒂固。在草编民意测验中,该组在选项1和3 之间平均分配。微软将反对选项1,谷歌反对选项3,因此讨论陷入僵局,并将在F2F期间私下继续进行,以期得出结论。
Flexbox%后续行动
[…]尚无结论。 当前的Flexbox规范对此进行了警告:
可以 根据以下任一条件解决弹性 项目上的边距和填充百分比 :
自己的轴(左/右百分比针对宽度,顶部/底部百分比针对高度)内联轴(左/右/上/下百分比均针对宽度进行解析) 用户代理必须选择以下两种行为之一。注意:这种差异很糟糕,但是可以准确地捕获当前的世界状态(实现之间没有共识,CSSWG 内部也没有共识)。CSSWG的意图是使浏览器集中在一种行为上,届时规范将进行修改以要求这样做。
作者应避免在弹性项目的填充或边距中完全使用百分比,因为它们在不同的浏览器中会出现不同的行为。
但是,最近CSS WG 解决了(存在一些争议):
flexbox和grid项的上,下边距和填充百分比都根据可用的行内方向解析。