CSS 弹性盒布局中的填充底部/顶部

Padding-bottom/top in flexbox layout

提问by Simon_Weaver

I have a flexbox layoutcontaining two items. One of them uses padding-bottom:

我有一个包含两个项目的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>

The blue element maintains its aspect ratio according to its widthwhen the page is resized. This works with Chrome and IEand looks like :

调整页面大小时，蓝色元素根据其宽度保持其纵横比。 这适用于 Chrome 和 IE，看起来像：

However, in Firefoxand Edge, I get the following (it's ignoring the padding on the blue box, which is what maintains the aspect ratio):

但是，在Firefox和Edge 中，我得到以下信息（它忽略了蓝色框上的填充，这是保持纵横比的原因）：

I'm too new to flexbox to really understand if this should or shouldn't work. The whole point of flexbox is to resize things, but I'm not sure why it is ignoring the intrinsic padding, and putting absolute sizes on the blue element.

我对 flexbox 太陌生了，无法真正理解这是否应该或不应该工作。flexbox 的全部意义在于调整事物的大小，但我不确定为什么它会忽略内在的填充，并将绝对大小放在蓝色元素上。

I guess ultimately I'm not even sure if Firefox or Chrome is doing the correct thing! Can any Firefox flexbox experts help?

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

回答by web-tiki

Update Febuary 2018

2018 年 2 月更新

Firefox and edge have agreed to change their behaviour on top, bottom margin and padding for flex (and grid) items :

Firefox 和 edge 已同意更改它们在弹性（和网格）项目的顶部、底部边距和填充方面的行为：

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

[...] 例如，在水平书写模式下，左/右/上/下百分比都根据其包含块的宽度进行解析。[来源]

This is not yet implemented (tested on FF 58.0.2).

这尚未实现（在 FF 58.0.2 上测试）。

Update april 2016

2016 年 4 月更新

(still valid in may 2017)

( 2017年5月仍然有效)

The specs have been updatedto:

规格已更新为：

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)

弹性项目上的百分比边距和内边距可以通过以下任一方式解决：

• 他们自己的轴（左/右百分比根据宽度解析，顶部/底部根据高度解析），或者，
• 内联轴（左/右/上/下百分比都根据宽度解析）

source: CSS Flexible Box Layout Module Level 1

来源：CSS 灵活框布局模块级别 1

This means that chrome IE FF and Edge (even if they don't have the same behaviour) follow the specs recomendation.

这意味着 chrome IE FF 和 Edge（即使它们没有相同的行为）遵循规范推荐。

Specs also say:

规格还说：

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

作者应该完全避免在弹性项目的内边距或边距中使用百分比，因为它们在不同的浏览器中会得到不同的行为。[来源]

---

---

Work around :

解决：

You can wrap the first child of the flex container in an other element and put the padding-bottomon the second child :

您可以将 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>

I tested this in modern browsers (IE, chrome, FF and Edge) and they all have the same behaviour. As the configuration of the 2nd child is the "same as usual", I suppose that older browsers (that aslo support flexbox layout module) will render the same layout.

我在现代浏览器（IE、chrome、FF 和 Edge）中对此进行了测试，它们都具有相同的行为。由于第二个孩子的配置“和往常一样”，我想旧的浏览器（也支持 flexbox 布局模块）将呈现相同的布局。

---

---

Previous answer:

上一个答案：

According to the specs, Firefox has the right behaviour

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

Explanantion :

说明：

Unlike block items which calculate their % margin/padding according to the containers width, on flex items:

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

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.

弹性项目上的百分比边距和内边距总是根据它们各自的尺寸进行解析；与块不同，它们并不总是针对其包含块的内联维度进行解析。

source dev.w3.org

来源 dev.w3.org

This means that padding-bottom/top and margin-bottom/top are calculated according to the height of the containerand not the width like in non-flexbox layouts.

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

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 fiddlewith a fixed height on the parent that shows that padding bottom is calculated according to the height of the display:flex;container.

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

---

---

回答by OrganicPanda

The accepted answer is correct but I improved on the solution by using a pseudo-element instead of adding a new element in to the HTML.

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

Example: http://jsfiddle.net/4q5c4ept/

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

HTML:

HTML：

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

CSS:

CSS：

#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%;
}

回答by hans

I used vh instead of % worked perfectly in Safari, Firefox & Edge

我使用 vh 而不是 % 在 Safari、Firefox 和 Edge 中完美运行

回答by Evgeny

    <div class="flex-parent">
      <div class="flexchild">
        <div class="pad"></div>
      </div>
    </div>  

.flex-child{
   height:100%;
}
.padd{
   padding-top:100% /* write 100%, or instead your value*/;
}