Autofitting高度與Flexbox，就不能正常工作

我試圖實現與CSS Flexbox的下述溶液中圖片：Autofitting高度與Flexbox，就不能正常工作

我在https://plnkr.co/edit/TbJIdOrJLtDfczno4Kpu?p=preview創建Plunkr這說明了什麼我現在有。

的grid row具有固定的高度（類網格行中Plunkr）
的red container應該自動調整的高度（沿Plunkr文章）
的header和footer具有固定的高度（頁眉和頁腳中Plunkr）
圖像應自動調整的剩餘空間，並設置爲背景圖片（圖片中Plunkr）

不管我嘗試，圖像自動確定網格行的高度。有人看到我做錯了嗎？

我的HTML

<div class="grid-row"> 

    <article> 

    <header> 
     Header text 
    </header> 

    <picture class="image"> 

    </picture> 

    <footer> 
     footer text 
    </footer> 

    </article> 

</div>

我的CSS

.grid-row { 
    background: orange; 
    height: 200px; 
} 

.image { 
    background-image: url('http://lorempixel.com/400/200/sports/5/'); 
    background-size: cover; 
    flex: auto; 
} 

article { 
    display: flex; 
    flex-direction: column; 
}

來源

2016-02-07 Bas van Dijk

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**。儘管您已經提供了一個示例鏈接，但如果鏈接無效，那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。 –

添加了HTML和CSS –

的問題是，你沒有延長Flexbox的造型向上/向下的結構。

.grid-row { 
 
    background: orange; 
 
    height: 200px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.image { 
 
    background-image: url('http://lorempixel.com/400/200/sports/5/'); 
 
    background-size: cover; 
 
    flex: 1; /* remaining height of article */ 
 
} 
 
article { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; /* 100% height of row */ 
 
} 
 
header { 
 
    background: red; 
 
} 
 
footer { 
 
    background: green; 
 
}

<div class="grid-row"> 
 

 
    <article> 
 

 
    <header> 
 
     Header text 
 
    </header> 
 

 
    <div class="image"></div> 
 

 
    <footer> 
 
     footer text 
 
    </footer> 
 

 
    </article> 
 

 
</div>

來源

2016-02-07 19:20:54

Autofitting高度與Flexbox，就不能正常工作

回答

相關問題