作者:乌海阿斯顿 | 来源:互联网 | 2023-05-25 12:16
我正在尝试使用由a 和a 组成的Media对象.HTML和类遵循此形式(顺序无关紧要).Media-body
Media-figure
.Media
.Media-figure
.Media-body
简单的CSS是(没有前缀):
.Media {
display: flex
}
.Media-figure {
flex: 0 0 auto;
/* same as...
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
*/
}
.Media-body {
flex: 1 1 0;
/* same as...
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
*/
}
请注意,我正在将Media-figure
flex-shrink因子调整为0(与我发布的链接相反).我假设这Media-figure
是一个固定的大小,如果我们的空间太小,我们宁愿不要把它缩小.
使用flex-basis: 0
for Media-body
应该将元素设置为没有初始大小,然后允许它使用剩余的可用空间,因为它是唯一的元素flex-grow: 1
.但是,在IE10-11中,flex-basis: 0
导致Media-body
宽度为内部元素的宽度,并且如果内容太多则会破坏任何包装行为.
http://jsfiddle.net/sgardn04/3enpp4wg/
(注意:如果你在chrome中查看它们,它们看起来完全一样.使用IE10-11!)
我目前的解决方法是设置Media-body { flex-basis: auto }
,这似乎有效.我假设IE在这里有问题,因为我更喜欢webkit浏览器的行为.是否有支持IE渲染的规范的合理解释?或者基于我在这里定义的类,我们可以期待webkit浏览器的不同行为的任何情况?在这种情况下,这两个属性似乎表现完全相同.
编辑:我发现这个方便的图形,似乎表明flex-basis
属性决定是否考虑元素宽度之前或之后的空间分布(flex-basis: 0
vs flex-basis: auto
).
1> 小智..:
差异是由于没有单位的价值flex-basis
.添加此(或省略0)可以在IE中获得预期的行为:更新的小提琴
MDN文档flex
提到了这一点:
优选大小为0 必须具有一个单元以避免被解释为灵活性.省略时默认为0%.
我一直在阅读文档,并得出了相同的结论.Microsoft引用"由数字指定的宽度,**后跟长度单位**".在他们的MSDN文档中,MDN状态"定义为数字**后跟绝对单位**,如px,mm或pt,或父Flex容器主要大小属性的百分比"