关于CSS：Flexbox布局中的填充底部/顶部


Padding-bottom/top in flexbox layout

我有一个Flexbox布局，其中包含两个项目。 其中之一使用padding-bottom：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#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;
}
1
  Some text

调整页面大小时，蓝色元素会根据其宽度保持其宽高比。
这适用于Chrome和IE，如下所示：

padding-bottom in chrome and IE on flexbox layout

但是，在Firefox和Edge中，我得到以下信息(它忽略了保持长宽比的蓝色框上的填充)：

padding-bottom in Firefox on flexbox layout

我对于Flexbox来说还太陌生，以至于无法真正了解它是否应该工作。 flexbox的全部目的是调整大小，但是我不确定为什么它会忽略固有的填充，而将绝对大小放在蓝色元素上。

我想最终我甚至不确定Firefox或Chrome是否在做正确的事情！ 任何Firefox flexbox专家都可以提供帮助吗？

相关讨论

2020年9月更新

FireFox和edge已从规范中实现了行为，并且flex元素的margin和padding均根据包含块的宽度进行计算。
就像块元素一样。

2018年2月更新

Firefox和Edge同意更改其在flex(和网格)项目的顶部，底部页边距和填充的行为：

[...] e.g. left/right/top/bottom percentages all resolve against their containing block’s width in horizontal writing modes.

尚未实现(已在FF 58.0.2上进行测试)。

2016年4月更新

(2017年5月仍然有效)

规格已更新为：

Percentage margins and paddings on flex items can be resolved against either:

  • their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
  • the inline axis (left/right/top/bottom percentages all resolve against width)

来源：CSS Flexible Box Layout Module Level 1

这意味着chrome IE FF和Edge(即使它们的行为不同)也遵循规范推荐。

规格还说：

Authors should avoid using percentages in paddings or margins on flex
items entirely, as they will get different behavior in different
browsers.

解决：

您可以将flex容器的第一个子元素包装在另一个元素中，然后将padding-bottom放在第二个子元素上：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#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 */
}
1
  Some text

我在现代浏览器(IE，chrome，FF和Edge)中对此进行了测试，它们都具有相同的行为。由于第二个子级的配置是"与往常相同"，我认为较旧的浏览器(也支持Flexbox布局模块的aslo)将呈现相同的布局。

先前的答案：

根据规格，Firefox具有正确的行为

说明：

与根据容器宽度计算其百分比边距/填充的块项目不同，在弹性项目上：

Percentage margins and paddings on flex items are always resolved
against their respective dimensions; unlike blocks, they do not always
resolve against the inline dimension of their containing block.

来源dev.w3.org

这意味着padding-bottom / top / top和margin-bottom-bottom / top是根据容器的高度计算的，而不是根据非flexbox布局中的宽度计算的。

由于您尚未在父级flex项上指定任何高度，因此该子级的底部填充应该为0px。
这是在父级上固定高度的小提琴，它表明填充底部是根据display:flex;容器的高度计算的。

相关讨论

可接受的答案是正确的，但我通过使用伪元素而不是在HTML中添加新元素来改进了解决方案。

示例：http：//jsfiddle.net/4q5c4ept/

HTML：

1
2
3
    <iframe id='catsVideo' src="//www.youtube.com/embed/tntOCGkgt98?showinfo=0" frameborder="0" allowfullscreen></iframe>
 
  That's cool! This text is underneath the video in the HTML but above the video because of 'column-reverse' flex-direction.

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#mainFlexbox {
  border: 1px solid red;
  width: 50%;
  margin: 0 auto;
  padding: 1em;
  display: flex;
  flex-direction: column-reverse;
}
#pnlText {
  border: 1px solid green;
  padding: .5em;
}
#videoPlaceholder {
  position: relative;
  margin: 1em 0;
  border: 1px solid blue;
}
#videoPlaceholder::after {
  content: '';
  display: block;
  /* intrinsic aspect ratio */
  padding-bottom: 56.25%;
  height: 0;
}
#catsVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
相关讨论

1
2
3
4
5
6
.flex-child{
   height:100%;
}
.padd{
   padding-top:100% /* write 100%, or instead your value*/;
}

我用vh代替％在Safari，Firefox和Edge中完美运行

相关讨论