Firefox 和 Chrome 中 Flexbox 的不同實現

Question

以下代碼在 Firefox 中按預期工作，但在 Chrome 中，圖像變得比 flex 容器大得多。

 .r { width: 100%; height: auto; min-width: unset; max-width: 100%; } .container { display: flex; width: 600px; }

 <div class="container"> <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > </div>

火狐：

鉻：

Answer 1

以下代碼在 Firefox 中按預期工作

我不同意這一點，因為對我來說，Chrome 的行為符合預期有兩個原因：

1. 您將圖像的寬度設置為100% ，這意味着600px定義的包含塊（容器）的 100%。 所以每張圖片都是600px

2. 由於默認的min-width配置，圖像不能縮小到其內容大小（請注意，在這種情況下使用unset等效於initial所以它在某種程度上是無用的）。 所以圖像將保持在600px

如果添加min-width:0圖像只會縮小寬度：

 .r { width: 100%; /*height: auto; useless */ min-width: 0; max-width: 100%; } .container { display: flex; width: 600px; }

 <div class="container"> <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > </div>

chrome 的行為似乎已經改變，因此在上一個版本中不再需要以下內容

現在，如果我們考慮您所面臨的 stretch效果的高度，這在兩個瀏覽器中也不相同。 解釋 ¹有點棘手，但是如果您更改默認對齊方式，您將在 chrome 中獲得預期的結果：

 
   
   
    
    .r { width: 100%; /*height: auto; useless */ min-width: 0; max-width: 100%; } .container { display: flex; width: 600px; align-items:flex-start; }
   
   

 
   
   
    
    <div class="container"> <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > </div>
   
   

或者，如果您使用百分比值更改高度， 您將使其失敗並獲得您想要的（這有點 hacky，因為我們正在觸發另一個問題來修復實際問題）

 
   
   
    
    .r { width: 100%; height:658%; /*any value here with %*/ min-width: 0; max-width: 100%; } .container { display: flex; width: 600px; }
   
   

 
   
   
    
    <div class="container"> <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > <img src="https://via.placeholder.com/1000x500" class="r" > </div>
   
   

為什么 Firefox 會有這樣的行為？

我不太清楚，但合乎邏輯的解釋是 Firefox 沒有考慮默認的min-width配置，而是優先考慮保持比例而不是拉伸效果。

---

¹最初，您的圖像定義了容器的高度，因為它們很大（大約 700 像素的高度），這個高度由容器使用，然后我們將屬性應用於我們的圖像，因此它們的寬度會縮小，並且由於默認對齊方式是拉伸它們將拉伸到最初由它們自己的初始高度定義的容器的高度，從而創建此渲染。

如果我們移除拉伸效果，圖像 將嘗試保持它們的比例，因為我們移除了高度約束。

如果我們考慮高度的百分比值，則相同的邏輯。 這一個將無法auto ，我們回到默認行為（保持縱橫比）

---

另一種選擇

該問題是由於使用圖像替換元素而產生的，這些元素具有固有尺寸，其中寬度/高度的計算不像其他元素那么簡單。

為避免這種行為，最好將圖像包裝在div中，並避免將它們作為彈性項目。

 .r { width: 100%; max-width: 100%; } .container { display: flex; width: 600px; } img { max-width: 100%; }

 <div class="container"> <div class="r"><img src="https://via.placeholder.com/1000x500"></div> <div class="r"><img src="https://via.placeholder.com/1000x500"></div> <div class="r"><img src="https://via.placeholder.com/1000x500"></div> <div class="r"><img src="https://via.placeholder.com/1000x500"></div> </div>

Answer 2

@TheRuler，最好的解決方案是將圖像標簽包裝在 div 或 span 中，以按照 Firefox 呈現圖像。 如果您將圖像包裝在 div 或 span 中，Firefox 也可以正常工作。

現在你可以問我為什么這是正確的。

基本上 display flex 附加了默認值，它們是：

flex-grow: 0
flex-shrink: 1
flex-basis: auto
flex: 0 1 auto /* Shorthand */

現在，對於 Firefox 和 Chrome，默認值是相同的。 但是兩個瀏覽器中的渲染仍然不同，特別是在圖像作為 flex child 的情況下。

現在誰是正確的值得商榷，誰正確地遵循了指導方針也是值得商榷的。

如果你看一下 flex 的規范，它會說，flex 規則應該優先於 CSS 的寬度和高度屬性。 所以在這種情況下，Firefox 正在縮小圖像的大小以使其適合 600px 父級。

現在如果你看到這個例子，

.container { display: flex; flex-direction: column;}
.container > div { flex: 1; height: 300px;}

<div class="container">
  <div>Single line in Firefox, but 300px tall in Chrome!</div>
</div>

因此，如果您在兩個瀏覽器中都看到此代碼，您將看到不同之處。 Chrome 重視 flex 子項的 height 屬性，而 Firefox 不重視它。 圖像高度和圖像寬度也是如此。 鉻不占高度。

所以這兩個瀏覽器都有自己的實現，在這種情況下不匹配，誰是正確的存在爭議。

因此，將它們包裝在 span 或 div 中，使其在兩個瀏覽器中都可以正常工作，這應該是正確的答案，沒有 hack。 其他解決方案將解決問題，但它們是解決問題的一種技巧。

如果你得到它請告訴我謝謝

Answer 3

感謝@TemaniAfif，他引導我朝着正確的方向前進，我想出了這個：

 .r { width: 100%; height: 100%; min-width: 0px; max-width: 100%; } .container { display: flex; width: 600px; }

 <div class="container"> <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" /> <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" /> <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" /> <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" /> </div>