css – 弹出框布局中的padding-bottom/top

前端之家收集整理的这篇文章主要介绍了css – 弹出框布局中的padding-bottom/top前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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>

页面调整大小时的蓝色元素maintains it’s aspect ratio according to it’s width
这适用于Chrome和IE,并且看起来像:

然而,在Firefox和Edge,我得到以下(它忽略蓝色框上的填充,这是维持宽高比的)

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

我想最终我甚至不知道如果Firefox或Chrome是做正确的事情!任何Firefox flexBox专家可以帮助吗?

解决方法

2016年4月更新

规格有been updated到:

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

解决方法

您可以将flex容器的第一个子包装在其他元素中,并将填充底部放在第二个子元素上:

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

我在现代浏览器(IE,chrome,FF和Edge)测试这些,他们都有相同的行为。由于第二个孩子的配置是“一样的”,我想老旧的浏览器(aslo support flexbox layout module)将渲染相同的布局。

上一个答案:

根据specs,Firefox有正确的行为

说明:

与根据容器宽度计算其margin margin / padding的块项目不同,在flex项目上:

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

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

由于您没有在父弹性项目上指定任何高度,子项的底部填充应为0px。
这里是一个固定高度的父节点的fiddle显示填充底部是根据显示器的高度计算:flex;容器。

原文链接:https://www.f2er.com/css/222720.html

猜你在找的CSS相关文章