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

问题描述

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

  #flexBox {border：1px solid red; width：50％; margin：0 auto; padding：1em;显示：flex; flex-direction：column;}＃text {border：1px solid green; padding：.5em;}＃padding {margin：1em 0; border：1px solid blue;填充底部：56.25％; / * intrinsic height ratio * / height：0;}  

  < div id ='flexBox'> < div id ='padding'>< / div> < div id ='text'>部分文字< / div>< / div>  

页面调整大小时，蓝色元素

但是，在 Firefox 和边缘中，我获得以下内容蓝色框，这是维持长宽比的）：

对于flexbox来说，我太新了，真的不明白这应该还是不应该工作。 flexbox的整体重点是调整大小，但我不知道为什么它忽略了内部填充，并将绝对大小放在蓝色的元素。

我猜最终我甚至不知道如果Firefox或Chrome是做正确的事情！

解决方案

2016年4月更新

规格已更新至

：

Flex项目上的边距和边框的百分比可以通过以下方式解决：

• 自己的轴宽度，顶部/底部相对于高度的分辨率），或


• 内嵌轴（左/右/上/ ul>
  

source： CSS Flexible Box Layout Module Level 1

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

规范还说：

作者应避免在flex
项目中使用paddings或margin中的百分比，因为他们将在不同的
浏览器中获得不同的行为。 [来源]

---

解决方法：

容器放在另一个元素中，并将 padding-bottom 放在第二个子元素上：

  #flexBox {border：1px solid red; width：50％; margin：0 auto; padding：1em;显示：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％; / *内在长宽比* /}  

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

我在现代浏览器（IE，chrome，FF和Edge）中测试了这些，它们都有相同的行为。由于第2个孩子的配置是一样的，我想老旧的浏览器（aslo 支持flexbox布局模块）将渲染

$ b

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

说明：

margin / padding根据容器宽度，在flex项目：

flex项目上的百分比边距和paddings总是解决
它们各自的尺寸;不像块，他们不总是
解决它们包含块的内联维度。

source dev.w3.org

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

由于您没有在父弹性项目上指定任何高度，子项的底部填充应该为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 it's aspect ratio according to it's 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 april 2016

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屋！