Chrome 没有正确覆盖 flex box 的 justify-content
Chrome not properly overriding justify-content for flex box
我在 Chrome 40.0.2214.93 中遇到问题,如果我重写某个元素的 justify-content
,我会遇到一些意外行为。
我在此处为此创建了一个 JS Fiddle:
http://jsfiddle.net/n670tmeu/
html
<header id="top">
<div id="box1">
This is Box 1
</div>
<div id="box2">
This is Box 2
</div>
</header>
css
header {
background-color: #ccc;
width: 100%;
display: -webkit-flex;
display: -moz-flexbox;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
}
header#top {
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
#box1, #box2 {
border-width: 1px;
border-style: solid;
border-color: red;
}
你会注意到更具体的 header#top
覆盖 justify-content
但是在 Chrome 中它最终将第一个项目推到 flex-end
位置然后添加额外的space 为 space-between
。
我已经在 FireFox 35.0.1 和 Safari 7.1.2 中尝试过,它们都可以正常工作。这是 Chrome 中的错误还是我做错了什么?
这是一个已知错误,已在最新的金丝雀版本 (42.0.2289.0) 中修复:
https://code.google.com/p/chromium/issues/detail?id=452606
同时,您可以使用 this jQuery 临时解决方案:
$('body *').each(function(i, el) {
var justifyContents = $(el).css('justify-content').split(' ');
var flexFlows = $(el).css('flex-flow').split(' ');
if (flexFlows[0] == 'row' && justifyContents.length > 1) {
if (justifyContents[0] == 'space-between' || justifyContents[0] == 'flex-start') {
$(el).css('justify-content', justifyContents[0]+' left');
} else if (justifyContents[0] == 'flex-end') {
$(el).css('justify-content', justifyContents[0]+' right');
}
}
});
我在 Chrome 40.0.2214.93 中遇到问题,如果我重写某个元素的 justify-content
,我会遇到一些意外行为。
我在此处为此创建了一个 JS Fiddle: http://jsfiddle.net/n670tmeu/
html
<header id="top">
<div id="box1">
This is Box 1
</div>
<div id="box2">
This is Box 2
</div>
</header>
css
header {
background-color: #ccc;
width: 100%;
display: -webkit-flex;
display: -moz-flexbox;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
}
header#top {
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
#box1, #box2 {
border-width: 1px;
border-style: solid;
border-color: red;
}
你会注意到更具体的 header#top
覆盖 justify-content
但是在 Chrome 中它最终将第一个项目推到 flex-end
位置然后添加额外的space 为 space-between
。
我已经在 FireFox 35.0.1 和 Safari 7.1.2 中尝试过,它们都可以正常工作。这是 Chrome 中的错误还是我做错了什么?
这是一个已知错误,已在最新的金丝雀版本 (42.0.2289.0) 中修复:
https://code.google.com/p/chromium/issues/detail?id=452606
同时,您可以使用 this jQuery 临时解决方案:
$('body *').each(function(i, el) {
var justifyContents = $(el).css('justify-content').split(' ');
var flexFlows = $(el).css('flex-flow').split(' ');
if (flexFlows[0] == 'row' && justifyContents.length > 1) {
if (justifyContents[0] == 'space-between' || justifyContents[0] == 'flex-start') {
$(el).css('justify-content', justifyContents[0]+' left');
} else if (justifyContents[0] == 'flex-end') {
$(el).css('justify-content', justifyContents[0]+' right');
}
}
});