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>

我已經試過與填充和供應商前綴擺弄，但沒有它的似乎有竅門。我不認爲這應該是一個巨大的改變，但我不太確定。

來源

2016-10-22 minifigmaster125

哦，我以爲我在某處讀過這個東西，但我想我沒有嘗試過。奇蹟般有效！你能爲它做出正式答案嗎？ – minifigmaster125

當然，你去了。 –

作爲flex-children的圖像在某些情況下會出現奇怪的反應。

通常最好將它們包裝在自己的div中。

至少，覆蓋align-items:stretch [這也是默認值]。

來源

2016-10-22 20:12:53

Firefox與Chrome的Flexbox區別？

回答

相關問題