Html 为什么';Firefox和Edge中flex项目的填充/边距百分比工作?
我想在flexbox里放一个正方形的div。因此,我使用:Html 为什么';Firefox和Edge中flex项目的填充/边距百分比工作?,html,css,firefox,flexbox,Html,Css,Firefox,Flexbox,我想在flexbox里放一个正方形的div。因此,我使用: .outer{ 显示器:flex; 宽度:100%; 背景:蓝色; } .内部{ 宽度:50%; 背景:黄色; 垫底:50%; } 呵呵 2018年更新 flexbox规范已更新 弹性项目上的百分比边距和填充物,如块上的边距和填充物 框,根据其包含块的内联大小进行解析, e、 g.左/右/上/下百分比均针对其 在水平写入模式下包含块的宽度 原始答案-适用于2018年之前发布的FF和Edge版本 从: 作者应该完全避免在flex项
.outer{
显示器:flex;
宽度:100%;
背景:蓝色;
}
.内部{
宽度:50%;
背景:黄色;
垫底:50%;
}
呵呵
2018年更新
flexbox规范已更新
弹性项目上的百分比边距和填充物,如块上的边距和填充物
框,根据其包含块的内联大小进行解析,
e、 g.左/右/上/下百分比均针对其
在水平写入模式下包含块的宽度
原始答案-适用于2018年之前发布的FF和Edge版本 从: 作者应该完全避免在flex项目的填充或边距中使用百分比,因为他们在不同的浏览器中会有不同的行为。 还有一些: 弹性项目上的百分比边距和填充可根据以下任一项解决:
- 它们自己的轴(左/右百分比相对于宽度的分辨率,顶部/底部相对于高度的分辨率),或者
- 内联轴(左/右/上/下百分比全部解析宽度)
原始答案-适用于2018年之前发布的FF和Edge版本 从: 作者应该完全避免在flex项目的填充或边距中使用百分比,因为他们在不同的浏览器中会有不同的行为。 还有一些: 弹性项目上的百分比边距和填充可根据以下任一项解决:
- 它们自己的轴(左/右百分比相对于宽度的分辨率,顶部/底部相对于高度的分辨率),或者
- 内联轴(左/右/上/下百分比全部解析宽度)
vw
/vh
可以是一个选项,因为它的工作原理类似(响应性)
堆栈片段
.outer{
显示器:flex;
宽度:100%;
背景:蓝色;
}
.内部{
宽度:50%;
背景:黄色;
垫底:50vw;
}
呵呵
此外,这里还有一个可能的解决方法
当使用百分比时,我们通常会将其与视口宽度联系起来,因此记住这一点,视口单位vw
/vh
可以是一个选项,因为它的工作原理类似(响应性)
堆栈片段
.outer{
显示器:flex;
宽度:100%;
背景:蓝色;
}
.内部{
宽度:50%;
背景:黄色;
垫底:50vw;
}
呵呵
@Lichtbringer,我可以在一个网站上使用display:block
绕过这个问题。请看我回答中的最后一点:这对我来说不是一个真正的解决办法,因为我“需要”使用flexbox。@Lichtbringer有一个解决办法,请检查我的回答规范现在已经修改:UAs必须根据内联大小解决填充/边距百分比:@Lichtbringer,我能够使用display:block
在一个站点上绕过这个问题。请看我的答案中的最后一个要点:当我“需要”使用FraceBox时,对我来说不是一个真正的解决办法。@ Lichtbringer有一个解决方案,检查我的答案。规范已经修改了:UAS必须解决百分比的填充/边距对内联大小的影响:我不认为这是真正的解决方法。我是说,是的,在某些星座中,它可能是你所追求的,但是如果你想让尺寸依赖于父节点,那么使用视口单位是很乏味的,因为你(可能)那时也需要更改其他节点。@Lichtbringer这就是我为什么写“…我们经常把它与视口宽度联系起来,所以要记住…”由于没有其他方法获得基于百分比的值,因此它是唯一的CSSworkaround@Lichtbringer我也给我的答案添加了第二个样本,我不认为这是真正的解决方法。我是说,是的,在某些星座中,它可能是你所追求的,但是如果你想让尺寸依赖于父节点,那么使用视口单位是很乏味的,因为你(可能)那时也需要更改其他节点。@Lichtbringer这就是我为什么写“…我们经常把它与视口宽度联系起来,所以要记住…”由于没有其他方法获得基于百分比的值,因此它是唯一的CSSworkaround@Lichtbringer我还添加了第二个示例到我的回答页边距或flex项的填充现在在两种浏览器上都可以正常工作。要使内部元素成为“正方形”,必须删除元素
或将其从布局中保留(例如位置:绝对
),因为它具有固有的高度。flex项的边距或填充现在在两种浏览器上都可以正常工作。去客栈