Firefox与Chrome的Flexbox区别?
问题描述:
我已经阅读了关于flexbox在不同浏览器中的显示方式的不同主题的一些内容,但没有一个帮助我解决布局问题。我已经实现了我自己的基本Flexbox网格。以下是Firefox中的正确布局:。这里是bug的布局看起来像在镀铬:Firefox与Chrome的Flexbox区别?
CSS:
//Actual page css
.point-one {
background-color: $off-white;
padding: 20px 20px;
.point-text {
padding: 0 20px;
}
}
// flexbox grid css
.grid {
display: flex;
flex-flow: row wrap;
align-items: stretch;
}
.grid-col {
display: flex;
flex-flow: column wrap;
align-items: center;
}
.fill {
flex-shrink: 0;
}
.col-1-10 {
flex: 10% 0 1;
}
.col-2-10 {
flex: 20% 0 1;
}
.col-3-10 {
flex: 30% 0 1;
}
.col-4-10 {
flex: 40% 0 1;
}
.col-5-10 {
flex: 50% 0 1;
}
.col-6-10 {
flex: 60% 0 1;
}
.col-7-10 {
flex: 70% 0 1;
}
.col-8-10 {
flex: 80% 0 1;
}
.col-9-10 {
flex: 90% 0 1;
}
.align-center{
align-items: center;
}
.even-spacing{
justify-content: space-around;
}
HTML:
<div className = "fill">
<div className = "point-one grid align-center ">
<div className = "col-2-10">
</div>
<div className = "col-6-10 point-text">
<h4> Aggregate all your cloud storage accounts in one place. All your
dropbox, onedrive, box, and google drive documents are here! </h4>
</div>
<div className = "col-2-10">
</div>
<div className = "col-1-10">
</div>
<div className = "col-8-10 grid even-spacing point-icons">
<img className="col-1-10 logo" id="db_logo" src={require("../images/dropbox-logos_dropbox-glyph-blue.png")} />
<img className="col-2-10 logo" src={require("../images/box_cyan.png")} />
<img className="col-1-10 logo" src={require("../images/product512.png")} />
<img className="col-3-10 logo" src={require("../images/OneDrive_rgb_Blue2728.png")} />
</div>
<div className = "col-1-10">
</div>
</div>
</div>
我已经试过与填充和供应商前缀摆弄,但没有它的似乎有窍门。我不认为这应该是一个巨大的改变,但我不太确定。
答
作为flex-children的图像在某些情况下会出现奇怪的反应。
通常最好将它们包装在自己的div中。
至少,覆盖align-items:stretch
[这也是默认值]。
哦,我以为我在某处读过这个东西,但我想我没有尝试过。奇迹般有效!你能为它做出正式答案吗? – minifigmaster125
当然,你去了。 –