弹性盒布局中的填充底部/顶部 [英] Padding-bottom/top in flexbox layout

问题描述

我有一个 flexbox 布局，其中包含两个项目.其中之一使用 padding-bottom :

#flexBox {边框:1px纯红色；宽度:50%；边距:0 自动；填充:1em；显示:弹性；弹性方向:列；}#文本 {边框:1px纯绿色；填充:.5em；}#填充{边距:1em 0；边框:1px纯蓝色；填充底部:56.25%；/* 固有纵横比 */高度:0；}

<div id='padding'></div><div id='text'>一些文本</div>

蓝色元素

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

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

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

解决方案

2020 年 9 月更新

FireFox 和 edge 已经实现了规范中的行为，并且弹性元素的边距 + 填充都是根据包含块的宽度计算的.
就像块元素一样.

2018 年 2 月更新

Firefox 和 edge 已同意更改它们在弹性(和网格)项目的顶部、底部边距和内边距方面的行为:

<块引用>

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

尚未实现(在 FF 58.0.2 上测试).

2016 年 4 月更新

(2017 年 5 月仍然有效)

规范已已更新:

<块引用>

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

<块引用>

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

来源:CSS 弹性框布局模块级别 1

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

规格还说:

<块引用>

作者应避免在 flex 的内边距或边距中使用百分比项目完全不同，因为它们会在不同的情况下获得不同的行为浏览器.[来源]

---

解决办法:

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

#flexBox {边框:1px纯红色；宽度:50%；边距:0 自动；填充:1em；显示:弹性；弹性方向:列；}#文本 {边框:1px纯绿色；填充:.5em；}#填充{边距:1em 0；边框:1px纯蓝色；}#padding >div {填充底部:56.25%；/* 固有纵横比 */}

<div id='padding'><div></div></div><div id='text'>一些文本</div>

我在现代浏览器(IE、chrome、FF 和 Edge)中对此进行了测试，它们都具有相同的行为.由于第二个孩子的配置是和往常一样"，我想旧的浏览器(也就是 support flexbox layout module) 将呈现相同的布局.

---

上一个答案:

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

说明:

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

<块引用>

弹性项目上的百分比边距和填充总是得到解决针对它们各自的维度；与块不同，它们并不总是针对其包含块的内联维度进行解析.

source dev.w3.org

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

由于您没有在父 flex 项上指定任何高度，因此子项的底部填充应该是 0px.
这是一个 fiddle 在父级上具有固定高度，表明填充底部是根据display:flex; 容器的高度.

---

I have a flexbox layout containing two items. One of them uses 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 width when the page is resized. This works with Chrome and IE and looks like :

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

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.

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

解决方案

Update september 2020

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 and edge have agreed to change their behaviour on top, bottom margin and padding for flex (and grid) items :

[...] 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).

Update april 2016

(still valid in may 2017)

The specs have been updated to:

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

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

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-bottom on the second child :

#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.

---

Previous answer:

According to the specs, Firefox has the right behaviour

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

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

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.

---

这篇关于弹性盒布局中的填充底部/顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！